Angular material 角度8和材质设计导航栏-显示选定项目

当我在水平导航栏中单击所选项目时，我正在尝试了解如何显示该项目。这是我的密码：

    <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>

虽然我对两条路由使用相同的路由器链接，但链接是真实的。单击时，所选项目不会保持高亮显示。下面是它在选择项目之前和之后的外观

您知道如何设置样式以显示活动项吗

---

谢谢

routerActiveLink指令只添加了一个css类，并将所有样式留给您。在您的情况下，将有一个活动类，您可以设置其样式

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

请记住，如果您使用@angular/material，您可能应该使用它们的主题来设置样式。你可以阅读更多关于这方面的内容

---

您是否正在将样式应用于.active？routerLinkActive只是添加了一个css类。不，我不是。需要吗？我在基于Bootstrap4的项目中使用了类似的技术，它似乎在那个里工作。虽然我正在使用pills，但我将这个.active{background:red；}添加到css文件中进行测试，现在两个项目都显示为红色。这是因为两个项目具有相同的url:/dashboard。RouterLink active将在您访问url/仪表板时向元素添加.active，我明白了。谢谢

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