Angular Router - 拦截子路由变化

Question

我正在为 UI 组件使用 NG-ZORRO，并且我有这个模板

my-component.component.html(MyComponent 类)

<nz-tabset [nzSelectedIndex]="selectedIndex">
  <nz-tab [nzTitle]="titleTpl">
    <ng-template #titleTpl>
      <div [routerLink]="['routeOne']"><i nz-icon type="profile"></i>...</div>
    </ng-template>
  </nz-tab>
  <nz-tab [nzTitle]="docsTpl">
    <ng-template #docsTpl>
      <div [routerLink]="['routeTwo']"><i nz-icon type="file-text"></i>...</div>
    </ng-template>
  </nz-tab>
</nz-tabset>
<router-outlet></router-outlet>

我需要根据事件路线更改 selectedIndex，无论是 routeOne 还是 routeTwo。
映射可能是

{
   "routeOne": 0,
   "routeTwo": 1
}

很遗憾，我无法使用 routerLinkActive，因为 nz-tab 不支持路由。

路线是

export const MY_ROUTES: Routes = [
  {
    path: ':myParam',
    component: MyComponent,
    children: [
      {
        path: '',
        redirectTo: 'routeOne',
        pathMatch: 'full'
      },
      {
        path: 'routeOne',
        component: RouteOneComponent
      },
      {
        path: 'routeTwo',
        component: RouteTwoComponent
      }
    ]
  }
];

所有这些都是因为用户可能想直接访问 http://.../123/routeOne，所以我需要预先选择正确的选项卡。

我能以某种方式完成这个吗？也许使用 ActivatedRoute 或 Router？

Answer 1

您可以像以前那样使用路由器来监听事件:

this.selectedRoute$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url),
     map(path => this.map[path])
);

您可以调整后面的 map 以检查路线是否与您的路线匹配，然后使用模板中的异步管道进行订阅，例如:

<nz-tabset [nzSelectedIndex]="selectedRoute$ | async">
....
</nz-tabset>

当您刷新页面或手动导航到该路线时，这也会起作用。

编辑:或订阅ActivatedRoute以相同的方式检索 URL。更多地使用 Observables，很酷的东西!祝你好运!

编辑 2: 如果您只想要当前 <router-outlet> 的路线您可以使用 ActivatedRoute 的范围像这样:

this.router.events
            .pipe(
                filter((event) => event instanceof NavigationEnd),
                map(() => this.activated),
                map((route) => {
                    while (route.firstChild) {
                        route = route.firstChild;
                    }
                    return route;
                }),
                switchMap((route) => route.url)
            )
            .subscribe((url) => console.log(url));

这应该能满足您的需求。