Привет, я использую угловые вкладки для маршрутизации моего приложения, и у меня есть несколько дочерних маршрутов. Вторая вкладка имеет два дочерних маршрута. Когда я переключаюсь на второй дочерний маршрут, статус вкладки меняется с активного на ничего. Я не знаю, где я могу ошибиться. Мой код пока выглядит следующим образом:

content.html (для навигационных ссылок)

 <nav mat-tab-nav-bar mat-align-tabs="center">
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
          {{link.label}}
        </a>
      </nav>

Content.ts

  navLinks = [
    {path: 'details', label: 'Details'},
    {path: 'select/products', label: 'Product'},
    {path: 'client', label: 'Client'},
  ];

app.module.ts

const appRoutes: Routes = [
  { path: 'details', component: DetailsComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'warranty',component: WarrantyComponent },
  { path: 'details',component: CldetailsComponent },
  { path: 'select',component: SelectComponent },
];

RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } 
    ),

RouterModule.forRoot([
     { path: '', redirectTo: 'login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent},
     { 
       path: 'policy', 
       component: PolicyComponent, 
       children: [
        {path: 'details', component: DetailsComponent}, 
        {path: 'select',component: SelectComponent, children: [{path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent},]}, 
        {path: 'client', component: CldetailsComponent},
       ]
    },

Пути ссылок маршрутизатора, которые я использую для навигации

<a routerLink="/policy/select/products"></a>
<a routerLink="/policy/select/warranty"></a>

На скриншотах ниже показано, что при использовании маршрута продукта все в порядке, но когда я пытаюсь перейти к маршруту гарантии, состояние вкладки изменяется. Любые идеи?

Active state

Not Active state

1
rob 5 Дек 2018 в 14:01

1 ответ

Лучший ответ

Проблема с родительским путем для навигационной ссылки. Вы должны использовать путь parent продукта и гарантии на панели навигации, чтобы он мог быть активен на основе product и `гарантии.

Измените путь для select/products на select как

  navLinks = [
    {path: 'details', label: 'Details'},
    {path: 'select', label: 'Product'}, //<--- changed here
    {path: 'client', label: 'Client'},
  ];

Примечание. Возможно, вам также потребуется изменить конфигурацию маршрутизации для пути select. Что должно быть компонентом по умолчанию для рендеринга в случае пути /policy/select.

Пример: здесь компонент по умолчанию будет ProductComponent

 children: [

        {path: 'select',component: SelectComponent, children: [{path: '', component: ProductsComponent}, {path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent}]}
       ]
1
Sunil Singh 5 Дек 2018 в 11:30