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

Question

在使用Angular 2 <span class="sr-only">(current)</span>时，只是想知道在我点击的有效链接中包含routerLink的方式？

示例：

<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 Bootstrap > Accessibility > Skip navigation ANgular 2 > ROUTING & NAVIGATION

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;
}