angular - 使用 ActiveRouterLink 指令不能正常工作

Question

这是当前的路由器设置，它工作正常。这是路径下的延迟加载模块search

所以网址变成了如下...... search/all search/web search/guides search/user search/books

const routes: Routes = [
  {
    path: '',
    component: GlobalSearchComponent,
    children: [
      {
        path: '',
        redirectTo: 'all'
      },
      { path: 'all', component: AllComponent },
      { path: 'web', component: WebComponent },
      { path: 'guides', component: GuidesComponent },
      { path: 'users', component: UsersComponent },
      { path: 'books', component: BooksComponent }
    ]
  }
];

现在我收到了一个删除 '/all' 的请求，只保留了 url，search所以我将其更改为：

const routes: Routes = [
  {
    path: '',
    component: GlobalSearchComponent,
    children: [
      {
        path: '',
        // redirectTo: 'all' <--- removed
        component: AllComponent
        // pathMatch: 'full' <--- removing this does nothing..
      },
      //{ path: 'all', component: AllComponent },
      { path: 'web', component: WebComponent },
      { path: 'guides', component: GuidesComponent },
      { path: 'users', component: UsersComponent },
      { path: 'books', component: BooksComponent }
    ]
  }
];

它工作......除了 routerLinkActive 指令没有像我期望的那样工作......

<nav mat-tab-nav-bar>
  <a
    *ngFor="let link of links"
    mat-tab-link
    routerLinkActive
    #rla="routerLinkActive"
    [routerLink]="[link.url]"
    [queryParams]="{ query: urlQueryParameter }"
    [active]="rla.isActive"
    >{{ link.title }}
  </a>
</nav>

rla.isActive不管用？

Answer 1

经过一些测试，我发现它非常简单。所需要的只是[routerLinkActiveOptions]="{ exact: true }"

问题是路线匹配两者'/'，它的孩子'/*'......

设置与路由配置中的[routerLinkActiveOptions]="{ exact: true }"原理相同pathMatch: 'full'，但用于 routerLinkActive

希望这对其他人有帮助:)