Angular Router - перехватить смену дочернего маршрута - PullRequest
Новая
       11

Angular Router - перехватить смену дочернего маршрута

2 голосов
/ 19 апреля 2019

Я использую 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?

1 Ответ

1 голос
/ 19 апреля 2019

Вы можете использовать маршрутизатор для прослушивания событий, как вы это сделали: 

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

Это должно дать вам то, что вам нужно.

...