@ui-router/Angular 将动态路由传递到模块中

Question

使用 https://ui-router.github.io/ 进行路由。我正在尝试为我的模块提供数据和 API 来加载路线。

 UIRouterModule.forChild({ states: ROUTES })

由于各种原因，我不再从我的route.ts文件中导出ROUTES，因为这存在必须实例化我的API所在的服务的问题，因此还必须将httpClient传递给该服务。我最终进行了多次 httpClient 调用，这绕过了我拥有的 httpInteceptor。

那么还有另一种方法使用 https://ui-router.github.io/ 从服务文件调用 api 吗？我尝试过将其放入模块

constructor()

中，将全局变量设置为ROUTES。然而，模块似乎在加载 constructor() 之前加载了

UIRouterModule.forChild({ states: ROUTES })

- 因此，尽管已接收到数据，但 ROUTES 在初始加载时仍为空。

我一直在阅读

UIRouterModule.forChild({ config: configureMyModule, states: ROUTES, })

，您可以在其中提供配置声明。我也尝试过从这里调用服务 api，但同样是在模块处理导入后执行的。我希望有一种方法可以通过访问此配置来从 api 添加其他路由？

如果我从模块中硬编码路由：

export let ROUTES: IAuthenticatedStateDefinition[] = [
    {
        name: 'main',
        url: 'help-guide',
        component: HelpGuideComponent,
        permission: [],
        breadcrumb: 'V',
        icon: '',
    }
];

上面的硬编码会及时执行。

整个模块（减去导入网址）：

export let ROUTES: IAuthenticatedStateDefinition[] = [];

export const HELP_GUIDE_STATES = (injector: Injector) => {
    let myService: HelpGuideService = injector.get(HelpGuideService);
    myService.getRoutes().subscribe((routes) => {
        ROUTES = routes;
        console.log(ROUTES);
    });
};
export function configureMyModule(uiRouter: UIRouter, injector: Injector, module: StatesModule) {

    let myService: HelpGuideService = injector.get(HelpGuideService);
    myService.getRoutes().subscribe((routes) => {
        ROUTES = routes;

    });
}

/** The NgModule for the HelpGuideModule */
@NgModule({
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        SharedModule,
        SharedConfigProviderModule.forChild(),
        CoreModule,
        MaterialModule,
        ArchwizardModule,
        TranslateModule,
       // UIRouterModule.forChild({states: HELP_GUIDE_STATES}),
        UIRouterModule.forChild({ config: configureMyModule, states: ROUTES, }),
        MarkdownModule.forRoot({
            loader: HttpClient,
            sanitize: SecurityContext.NONE,
        }),
    ],
    providers: [
        HelpGuideService,
    ],
    declarations: [
        HelpGuideComponent,
        declarations
    ],
    exports: []
})
export class HelpGuideModule {}

Answer 1

解决方案是注册从服务调用的新状态。这实际上会在第一次分配后更新状态。您需要第一个分配来使模块真实，否则它将没有创建模块的初始路径。

添加：

uiRouter.stateRegistry.register(state);

向configureMyModule()函数添加从服务调用的动态状态。我必须记住，此时默认路由可能已重复，因此选项是取消注册第一个默认路由，或者不将其包含在您的服务路由数据中并进行硬编码。

let myService: HelpGuideService = injector.get(HelpGuideService);
myService.getRoutes().subscribe((routes) => {
routes.forEach(state => {
   uiRouter.stateRegistry.register(state);
  });
});