Angular 8 和 Material Design 导航栏 - 显示所选项目

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，您可能应该使用他们的主题对其进行样式设置。你可以阅读更多关于here的信息。

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