3

我正在为 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
}

不幸的是，我不能使用routerLinkActiveasnz-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，所以我需要预先选择正确的选项卡。

我能以某种方式做到这一点吗？也许使用ActivatedRouteor Router？

4

1 回答 1

3

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

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

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

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

这应该给你你所需要的。

于 2019-04-19T13:11:58.097 回答