routerLinkActive doesn't work inside nested router-outlet

Viewed 1020

I have following templates

app:

<app-header></app-header>
<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

articles:

<div class="row mt-2">
  <div class="col-md-10">
    <router-outlet></router-outlet>
  </div>
  <div class="col-md-2">
    <ul class="nav nav-pills flex-column">
      <li class="nav-item">
        <a class="nav-link" routerLink="./category/all" routerLinkActive="active">
          All Categories
        </a>
      </li>
      <li class="nav-item" *ngFor="let category of categories">
        <a class="nav-link" [routerLink]="['./category', category.id]" routerLinkActive="active">
          {{category.name}}
        </a>
      </li>
    </ul>
  </div>
</div>

articles-list:

<ul class="nav nav-tabs mb-2">
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/articles/category', categoryId, 'best']" routerLinkActive="active">
      Best
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/articles/category', categoryId, 'latest']" routerLinkActive="active">
      Latest
    </a>
  </li>
</ul>

and router config:

  {
    path: 'articles',
    component: ArticlesComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'articles/category/all/best/all/page/0',
      },
      {
        path: 'articles/category/:categoryId',
        pathMatch: 'full',
        redirectTo: 'articles/category/:categoryId/best/all/page/0',
      },
      {
        path: 'articles/category/:categoryId/:sortOrder',
        pathMatch: 'full',
        redirectTo: 'articles/category/:categoryId/:sortOrder/all/page/0',
      },
      {
        path: 'articles/category/:categoryId/:sortOrder/:filter/page/:page',
        component: ArticlesListComponent,
        resolve: {
          page: ArticleResolver
        }
      }
    ],
    resolve: {
      categories: CategoriesResolver
    }
  }

For some reason when I navigate through links in articles template "Best" link in articles-list template doesn't become active. However, it become active once page reloaded.

Why link doesn't change it's status to active and is there the way to solve this issue? Thanks.

Edit: My code on plunkr

0 Answers
Related