Question

我有一个带有id参数的路由器。首次导航到该路由时，路由器链接激活功能可以正常工作并且适用该类，但是例如，当使用不同的ID导航时，路由器链接激活功能无法正常工作。有没有人经历过？

我的html文件：

<div class="sidenav-content-wrapper" fxLayout="column" fxFill
  [ngClass]="{ 'sidenav-content-wrapper--closed': !menuState.isOpened }">
  <div class="sidenav-button" fxLayoutGap="20px" fxLayoutAlign="start center" routerLink="/companies"
    [queryParams]="{feature: 'companies'}" [ngClass]="{
      'sidenav-button-active': selectedFeature === 'companies'
    }">
    <mat-icon class="sidenav-button-icon">business</mat-icon>
    <span class="sidenav-button-text">Companies</span>
  </div>
  <div class="sidenav-button" fxLayoutGap="20px" fxLayoutAlign="start center" [queryParams]="{feature: 'branches'}"
    [routerLink]="['/branches', selectedCompany]" [ngClass]="{
      'sidenav-button-active': selectedFeature === 'branches'
    }">
    <mat-icon class="sidenav-button-icon">work</mat-icon>
    <span class="sidenav-button-text">Branches</span>
  </div>
  <div class="sidenav-button" fxLayoutGap="20px" fxLayoutAlign="start center">
    <mat-icon class="sidenav-button-icon">history</mat-icon>
    <span class="sidenav-button-text">Action Logs</span>
  </div>
  <div class="sidenav-button" fxLayoutGap="20px" fxLayoutAlign="start center">
    <mat-icon class="sidenav-button-icon">settings</mat-icon>
    <span class="sidenav-button-text">Profiles</span>
  </div>
</div>

现在，我正在url中使用查询参数来处理这种情况，但这并不是最佳选择。

我尝试了以下操作：

<div class="sidenav-button" fxLayoutGap="20px" fxLayoutAlign="start center" routerLinkActive="sidenav-button-active"
  [routerLinkActiveOptions]="{exact:
false}" [routerLink]="['/branches', selectedCompany]">

正在分支页面本身上选择一家公司，此html代码来自导航到分支页面的sidenav。对于第一次导航，它工作正常，但是在分支页面中选择新公司时，该类不再适用。

Answer 1

我认为存在语法错误。您应该仅通过使用routerLinkActive来采用这种方法。

我已经在我的项目及其工作中尝试过此操作。

<div class="sidenav-button" fxLayoutGap="20px" fxLayoutAlign="start center" 
    [routerLinkActive]="['sidenav-button-active']" [routerLinkActiveOptions]={exact:false}"
    [routerLink]="['/branches', selectedCompany]">

角路由器链接激活

1 个答案: