使用Angular 2 ** routerLink **时，如何在HTML链接中添加内容“… <span class=“sr-only”>（当前）</span> ”？

Question

只想知道使用Angular 2 routerLink如何在单击的活动链接中包含<span class="sr-only">(current)</span> ？

例：

<ul class="nav nav-sidebar">
    <li routerLinkActive="active">
        <a routerLink="/dashboard">Dashboard <span class="sr-only">(current)</span></a>
    </li>
    <li>
        <a href="">Registers</a>
    </li>
    <li routerLinkActive="active">
        <a routerLink="/organizations">Organizations</a>
    </li>
</ul>

来源： Twitter引导程序>辅助功能>跳过导航 ANgular 2>路由和导航

Answer 1

在您的组件中，您可以添加isActiveLink方法，例如

@Component({
  selector: 'my-app',
  template: `
<ul class="nav nav-sidebar">
    <li routerLinkActive="active">
        <a routerLink="/dashboard">
            Dashboard
            <span *ngIf="isActiveLink('/dashboard')" class="sr-only">(current)</span>
        </a>
    </li>
    <li>
        <a href="">Registers</a>
    </li>
    <li routerLinkActive="active">
        <a routerLink="/organizations">
            Organizations
            <span *ngIf="isActiveLink('/organizations')" class="sr-only">(current)</span>
        </a>
    </li>
</ul>
  `,
  styleUrls: ['app/app.component.css'],
})
export class AppComponent {

  isActiveLink(link:string) {
    return this.router.isActive(link);
  }

  constructor(private router:Router) {}
}

Answer 2

如果您只想标记实际活动的路由，则可以只将routerLinkActive添加到指令（您这样做了），它将active类添加到锚标记，因此您可以简单地在css中设置活动链接的样式。 如果您有类似的东西：

<ul class="nav nav-sidebar">
    <li routerLinkActive="active">
        <a routerLink="/dashboard">Dashboard <span class="sr-only">(current)</span></a>
    </li>
</ul>

您可以使用以下方法简单地设置样式：

nav-sidebar li:active {
   background-color: #00CAFE;
}