0

我们有一些带有自己导航栏的模块。这些导航栏是实际的组件,一旦激活HeaderComponent相应的路线,它们就会在应用程序的全局中激活。

要传递导航组件,我们使用data以下路由的属性app-routing.module.ts

import { TestNavigationComponent } from './modules/test/components/test-navigation/test-navigation.component';

{
  path: 'test',
  loadChildren: () => import('./modules/test/test.module').then(m => m.TestModule),
  data: {
    nav: TestNavigationComponent
  },
},

虽然这很好用,但我想知道:

这是否规避了模块的延迟加载?模块是否仍然加载,因为导航组件已经导入到 gobalapp-routing.module.ts中?

如果是,我如何将导航组件与模块捆绑在一起并将其传递给应用程序的标题?

目前,导航在标题组件中呈现如下:

private updateNavigation(snapshot: ActivatedRouteSnapshot): void {
  const nav: Type<Component> = (snapshot.data as {nav: Type<Component>}).nav;

  if (nav instanceof Type) {
    if (nav === this.navigationType) {
      return;
    }

    this.clearNavigation();
    this.navigationType = nav;

    const factory: ComponentFactory<Component> = this.componentFactoryResolver.resolveComponentFactory(nav);
    this.navigationComponentRef = this.navigationRef.createComponent(factory);

    return;
  }

  for (let childSnapshot of snapshot.children) {
    this.updateNavigation(childSnapshot);
  }
}
4

0 回答 0