Angular路由器：获取与当前路由匹配的路由配置

Question

我的 Angular 项目中有以下路由配置：

export const routes: Routes = [
  { path: 'a/:id', loadChildren: './a/a.module#AModule', data: {a: a}},
  { path: 'b/:id',  loadChildren: './b/b.module#BModule', data: {a: b}}
];

现在我可以像这样得到我的路线配置：

this.router.config //outputs the above array

this.router.url 显示 a，但我如何正确识别正确的 Route，因为配置具有未解析的路径，而路由器拥有已解析的路径。

我想这样做的原因是访问 app.component 中的 data 我的 router-outlet 所在的位置而不是组件本身（angular 文档表示 data 对象只能由路由组件本身访问。

Answer 1

您可以在您的应用程序组件中使用 router-outlet 的激活输出

<router-outlet (activate)="onActivate($event)"></router-outlet>

它给你加载的组件

在你的 app.component.ts

onActivate(event : any) {
   console.log(event);
}

示例：

Answer 2

我会解决这个问题，拆分延迟加载路径，使其更简单。根路由：

export const routes: Routes = [
  { path: 'a', loadChildren: './a/a.module#AModule'},
  { path: 'b',  loadChildren: './b/b.module#BModule'}
];

模块A路由：

export const aModuleRoutes: Routes = [
             { path: 'item/:id', component: YourComponent, data: {a: a}}  
];

模块 B 路由：

export const bModuleRoutes: Routes = [
             { path: 'item/:id', component: YourComponent, data: {a: b}}  
];

这里每个模块都有单独的路线，您可以玩单独的模块路线。快乐编码

Answer 3

我用这段代码解决了它：

this.router.events.subscribe(event => {
    if (event instanceof RoutesRecognized) {
        console.log(event.state.root.firstChild.data['a']);
     }
});

Answer 4

IMO 要获取 routeConfig，您需要路由器事件的 ActivationEnd 事件。我已经在路径中搜索参数以通过这种方式进行比较：

this.router.events.subscribe((event: any) => {
if (event instanceof ActivationEnd) {
  const segmentArr = event.snapshot.routeConfig.path.split('/'); // there will be what you need
  const lastSegment = segmentArr.pop();
  // if the segment is not a param
  if (lastSegment.includes(':')) {
   // this is ":someparam" segment
  }
}
});

Answer 5

您可以使用 Router.state 获取原始 Route 配置。

Angular 路由器将当前路由表示为分层路由树，由于 children，因此您需要遍历它以获得最深的 child，这通常是您要查找的.

可以通过以下方式完成：

let currentRoute = this.router.routerState.root;
while (currentRoute.firstChild) {
    currentRoute = currentRoute.firstChild;
}
console.log(currentRoute.routeConfig); // returns `Route` object

为了对变化做出反应，这应该在 this.router.events.subscribe(...).

内

Answer 6

可以在没有事件的情况下访问此配置，例如从 onInit root（但也可以在订阅主体中使用）：

const config = !!this.activatedRoute.snapshot.root.firstChild.children.length
      ? this.activatedRoute.snapshot.root.firstChild.firstChild.data
      : this.activatedRoute.snapshot.root.firstChild.data;
this.hideHeader = config['hideHeader'] ?? false;

children 长度检查用于二级配置：

  RouterModule.forRoot([
    {
      path: 'login',
      component: WelcomePageComponent,
      data: {
        hideHeader: true,
      },
    },
    {
      path: '',
      canActivateChild: [AuthGuard, ACLGuard],
      children: [
        {
          path: '',
          redirectTo: 'wizard',
          pathMatch: 'full',
        },
        {
          path: 'wizard',
          data: {
            hideHeader: true,
          },
        },
      ],
    },
  ],

Angular路由器：获取与当前路由匹配的路由配置

Angular Router: Get route config that matched the current route

angular-routing

angular