Как добавить содержимое `...<span class =" sr-only ">(текущий)</ span></a>` в ссылку HTML при использовании Angular 2 **routerLink**?

Question

Просто хочу знать, как включить <span class="sr-only">(current)</span> на моей активной ссылке при использовании Angular 2 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> Специальные возможности> Пропустить навигацию 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;
}