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)
    }
];

AppComponent（根）

<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));
  }
}

因此唯一缺少的是设置了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 {}

如何在Angular中获取当前路线的模块

1 个答案: