Угловая дочерняя маршрутизация во вкладках не отображается в активной вкладке - PullRequest
Новая
       42

Угловая дочерняя маршрутизация во вкладках не отображается в активной вкладке

0 голосов
/ 05 декабря 2018

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

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 Ответ

0 голосов
/ 05 декабря 2018

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

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

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

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

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

 children: [

        {path: 'select',component: SelectComponent, children: [{path: '', component: ProductsComponent}, {path: 'products', component: ProductsComponent},{path: 'warranty', component: WarrantyComponent}]}
       ]
...