Angular 8 и дизайн материала navbar - показать выбранный пункт

Question

Я пытаюсь понять, как показать выбранный элемент, когда я нажимаю на него на горизонтальной панели навигации. Вот мой код:

    <mat-toolbar color="primary" class="topbar relative">
        <div class="navbar-header">

            <div color="primary">
                <div>
                  <a href="#" mat-button  routerLinkActive="active" routerLink="/dashboard"> Accounts </a>
                  <a href="#" mat-button  routerLinkActive="active" routerLink="/dashboard"> Create Account </a>
                </div>
              </div>
        </div>
    </mat-toolbar>

Хотя я использую одну и ту же ссылку на маршрутизатор для обоих маршрутов, эта связь реальна. Когда я нажимаю, выбранный элемент не остается выделенным. Вот как это выглядит до и после выбора элемента.

Есть идеи, как оформить его для отображения активного элемента?

Спасибо

Answer 1

Директива routerActiveLink просто добавляет класс css и оставляет вам все стили. В вашем случае будет класс active, который вы можете стилизовать.

// my.component.scss
.active {
  background: red;
}

Помните, что если вы используете @ angular / material, вам, вероятно, следует стилизовать его, используя их темы. Вы можете прочитать больше об этом здесь .

// _my-theme.scss (only do this if you use material themes)
.active {
  background: mat-color($accent);
}