Как сделать активную кнопку с помощью маршрутизации? - PullRequest
Новая
       0

Как сделать активную кнопку с помощью маршрутизации?

0 голосов
/ 21 октября 2019

Я использую компонент Menu. И мне нужно сделать так, чтобы, если какая-то ссылка из меню активна, то кнопка также стала активной, то есть выкрашенной в какой-то цвет. Как это сделать? 

    <button mat-button [matMenuTriggerFor]="menu" routerLinkActive="active">
        Directories
        <mat-icon>expand_more</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item routerLinkActive="active" routerLink="/directory/teams"
            routerLinkActive="color">Teams</button>
        <button mat-menu-item routerLinkActive="active" routerLink="/directory/Teams"
            routerLinkActive="color">Masters</button>
    </mat-menu>

1 Ответ

1 голос
/ 21 октября 2019

Вы можете проверить, активен ли маршрут с помощью функции маршрутизатора isActive и объявить exactMatch: false. Затем вы получите логическое значение, которое говорит, активирован ли точный маршрут «каталог» или подпрограмма. Поскольку ваш mat-button не является ссылкой на маршрутизатор, вы не можете использовать атрибут routerLinkActive. Вместо этого определите CSS-класс с помощью ngClass.

HTML: 

<button mat-button [matMenuTriggerFor]="menu" [ngClass]={'active': isDirectoryPath()}>
    Directories
    <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu">
    <button mat-menu-item routerLinkActive="active" routerLink="/directory/teams"
        routerLinkActive="color">Teams</button>
    <button mat-menu-item routerLinkActive="active" routerLink="/directory/Teams"
        routerLinkActive="color">Masters</button>
</mat-menu>

TS: 

constructor(private router: Router){}

isDirectoryPath() {
  return this.router.isActive('directory', false); // <-- boolean is for exactMatch
}
...