Question

我有一个导航，其工作方式如下：

- user
- products
  + category1
  + category2

根据URL导航到产品，默认情况下进一步导航到category1。

我已经使用mat-tab-nav-bar实现了此操作，其中，当路线为/user时，用户的主标签突出显示，而当路线为/products/category1时，产品的主标签突出显示（如导航至此一样）默认情况下）。

在产品中，我有两个用于类别1和类别2的按钮，它们分别导航到/products/category1和/products/category2。

我希望突出显示主选项卡“产品”，而不管是否设置了category1或category2。问题是，每当我切换到category2时，主选项卡都不再突出显示。

打字稿：

this.routes = [
{
  name: 'User',
  path: '/user',
  index: 0
}, {
  name: 'Products',
  path: '/products/category1',
  index: 1
}];

HTML：

<nav mat-tab-nav-bar>
  <a mat-tab-link *ngFor="let route of routes"
     [routerLink]="route.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive" >
    {{route.name}}
  </a>
</nav>

Answer 1

发现它在使用时有效

path: ['/products', subCategory]',

其中subCategory是一个变量，它根据路由器注册的URL的路径将'category1'或'category2'作为值。

RouterLink通过两条路由设置为isActive

1 个答案: