如何在 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接口为如何使用APP_INITIALIZER创建了一种标准，类似于OnInit 、 OnDestroy等接口。

// 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事件并遍历路由树以获取最后一个子节点，这应该是我们当前的路由。 我们最近的路由现在应该是我们可以订阅的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 {}