保持活动 link 标记为角度

Question

我在 power bi 报告中使用 table 作为导航栏和页面名称列表，一旦我单击其中一个页面，部分 ID 就会添加到我的 power bi link在 iframe 中。

我需要将导航栏中的第一页标记为“活动”link，当我点击每个 link 时它会发生变化，因为我没有 routerLink; routerLinkActive 对我不起作用。

这是我要集成它的代码片段：

<table class="tab" [ngSwitch]="[myParam]" >
    <tr *ngSwitchCase="1">
      <td class="nav-link nav-link-line" *ngFor="let l of linkDash1" >
        <a (click)="changePage(l.idSection)"> {{l.page}}</a>
      </td>
      <td>
        <img class="logoGo" src="assets/icons/logo.png" [routerLink]="['/index']">
      </td>
    </tr>
</table>

有什么想法吗？提前致谢

Answer 1

一种方法是设置在组件上选择项目的哪个索引，然后在索引与使用 ngClass 的“活动”索引匹配时添加 css class。

示例：

// template
<td
  [ngClass]="{ 'nav-link': true, 'nav-link-line': activeIndex === i }"
  *ngFor="let l of linkDash1; let i = index;"
>
  <a (click)="changePage(l.idSection, i)"> {{l.page}}</a>
</td>

// component
export class YourComponent {

  activeIndex: number = null;

  changePage(section: string, index: number): void {
    // your existing code
    this.activeIndex = index;
  }
}

或者，您可以使用 idSection 属性。您可以使用任何东西，只要它在您的 ngFor

中是唯一的且可访问的

保持活动 link 标记为角度

Keep the active link marked angluar

navbar

angular