routerLinkActive在嵌套路由器插座内不起作用

Question

我有以下模板

应用：

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

制品：

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

文章列表：

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

和路由器配置：

  {
    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
    }
  }

由于某种原因，当我浏览文章模板中的链接时，文章列表模板中的“最佳”链接不会变为活动状态。但是，一旦页面重新加载它就会变为活动状态

为什么链接不会将其状态更改为活动状态，是否有解决此问题的方法？感谢。

修改：我plunkr上的代码