angular - 如何在 Angular 中获取当前路由的模块

Question

我正在开发一个简单的组件，它会根据当前路线的模块更改数据。我不确定在哪里可以找到有关该模块的信息。

路由器

const routes: Routes = [
    {
        path: '', 
        loadChildren: () => import('@/app/homepage/homepage.module').then(m => m.HomepageModule)
    },
    {
        path: 'search', 
        loadChildren: () => import('@/app/search/search.module').then(m => m.SearchModule)
    }
];

应用组件(根)

<div *ngIf="isHomepageModule; else otherModules">...</div>
<ng-template #otherModules>
    <div>...</div>
</ng-template>
<router-outlet></router-outlet>

constructor(private route: ActivatedRoute) {}

get isHomepageModule() {
    // This would be the ideal situation... 
    // Unfortunately, I cannot find any information about the module here
    return this.route.snapshot.module instanceof HomepageModule;
}

模块信息是否可以访问？我宁愿进行类型检查或模块名称比较，而不仅仅是“强制”检查与当前 url 的某些正则表达式匹配。提前谢谢你。

Answer 1

我最终稍微改变了最初的想法，并根据路由的 data 属性比较了路由/模块。此外，我创建了 AppService 来跟踪当前路线。这很有用，因为路由的树遍历可能是一个昂贵的逻辑，最好不要重复。

// app.model.ts
export interface OnAppInit {
  ngOnAppInit: () => void;
}

OnAppInit 接口(interface)为如何使用 APP_INITIALIZER 创建了一种标准类似于 OnInit、OnDestroy 等接口(interface)。

// app.service.ts
@Injectable()
export class AppService implements OnAppInit {

  route$: BehaviorSubject<ActivatedRouteSnapshot> = new BehaviorSubject<ActivatedRouteSnapshot>();

  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnAppInit() {
    this.route.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let route = this.route.snapshot;
      while (route.firstChild) {
        route = route.firstChild;
      }
      this.route$.next(route);
    });
  }
}

// app.modules.ts
@NgModule({
  // ...
  providers: [
    // ...
    {
      multi: true,
      provide: APP_INITIALIZER,
      useFactory: function initializeRoutes(appService: AppService) {
        return () => appService.ngOnAppInit();
      },
      deps: [AppService]
    }
  ]
})
export class AppModule {}

AppService 监听路由器上发生的所有NavigationEnd 事件，遍历路由树得到最后一个 child ，这应该是我们当前的路由。我们最近的路线现在应该是我们可以订阅的 route$ 属性的下一个值。

// app.component.ts
@Component(/* ... */)
export class AppComponent implements OnInit {

  constructor(private appService: AppService) {}

  ngOnInit(): void {
    this.appService.route$.subscribe(route => console.log(route.data));
  }
}

所以唯一缺少的是带有数据属性集的新路由配置。

const routes: Routes = [
  {
    path: '',
    data: { showHeader: true },
    loadChildren: () => import('@/app/homepage/homepage.module').then(m => m.HomepageModule)
  },
  {
    path: 'search',
    data: { showHeader: false },
    loadChildren: () => import('@/app/search/search.module').then(m => m.SearchModule)
  }
];

并且由于我们想要访问当前路由(路由树的最后一个子节点)中的数据，我们需要配置路由模块来继承数据。

// app.module.ts
@NgModule({
  // ...
  imports: [
    // ...
    RouterModule.forRoot(routes, {
      paramsInheritanceStrategy: 'always',
    })
  ]
})
export class AppModule {}