与* ngFor一起使用时,RouterLinkActive不起作用

时间:2019-04-11 11:26:43

标签: angular typescript angular2-routing

当我将 RouterLinkActive 类与 ngFor 一起使用时,该类不起作用。我不知道我在哪里落后。下面是我使用的代码。

HTML

<div class="mobileNavScroll" [class.leftNavOpened]="status">
    <ul role="tablist" aria-orientation="vertical">
      <li class="nav-item" *ngFor="let tab of tabs">
        <a
        routerLinkActive="active"
        routerLinkActiveOptions="{exact:true}"
          [routerLink]="tab.routerLink"
          >{{ tab.label }}</a
        >
        <i *ngIf="tab.hasErrors" class="pi pi-info-circle tab-errors"></i>
      </li>
    </ul>
  </div> 

.ts

tabs: CommercialReportentryTabInfo[];
this.tabs = [
  {
    label: 'General Info, Land & Zoning',
    routerLink: 'general',
    component: CommercialReportentryGeninfoComponent,
    hasErrors: false
  },
  {
    label: 'Improvements',
    routerLink: 'improvements',
    component: CommercialReportentryImprovementsComponent,
    hasErrors: false
  },
]

interface CommercialReportentryTabInfo {
  label: string;
  routerLink: string;
  formGroup?: string;
  component: Function;
  hasErrors: boolean;
}

我还添加了必需的模块。单击其他选项卡时,routerLink可以正常工作。但是,活动类不会应用于标签

0 个答案:

没有答案