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。

我要这样做的原因是访问data所在的app.component中的router-outlet而不是组件本身（角度文档指出{{1 }}对象只能由路由组件本身访问。

Answer 1

您可以在应用程序组件内部使用激活路由器出口的输出

<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 配置。

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

可以通过以下方式完成：

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;

子长度检查用于两级配置：

  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 Router：获取与当前路由匹配的路由配置

6 个答案: