保持活动链接标记为角度

Question

当我单击 iframe 中的 power bi 链接中添加部分 ID 的页面之一时，我在我的 power bi 报告中使用了一个包含页面名称列表的导航栏表格。

我需要将导航栏中的第一页标记为“活动”链接，当我点击每个链接时它会发生变化，因为我没有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 类。

例子：

// 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 中是唯一且可访问的