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