Angular Material mat-nav-list 活动路线

Question

我正在发现有角度的材料，并且我正在努力寻找在导航组件中突出显示激活路线的正确方法。我注意到导航原理图中默认情况下并未完成此操作。

我首先想使用自定义类和 routerLinkActive 自己完成此操作，就像在常规 Angular 应用程序中一样......但我遇到了一些问题。背景颜色工作正常，但颜色被其他材质类覆盖，即使我在 css 中添加 !important 也是如此。

所以我试图看看我是否做错了什么，并意识到实际上有一个内置功能，具有激活的属性：https://material.angular.io/components/list/overview#navigation-lists

但是，我不理解文档的示例。我不知道@for 中使用的链接列表是什么。经过更多研究后，我设法做我想做的事，但方式非常丑陋：

<mat-nav-list>
    <a mat-list-item routerLink="/events" routerLinkActive 
        #rla1="routerLinkActive" [activated]="rla1.isActive">
        Events
    </a>
    <a mat-list-item routerLink="/contact" routerLinkActive 
        #rla2="routerLinkActive" [activated]="rla2.isActive">
        Contact
    </a>
    <a mat-list-item routerLink="/map" routerLinkActive 
        #rla3="routerLinkActive" [activated]="rla3.isActive">
        Map
    </a>
</mat-nav-list>

我确信这应该很简单，但我无法弄清楚。如果有人知道如何使其更清洁，请告诉我，我将非常感激。

Answer 1

您可以使用

routerLinkActive

选项传递添加到

mat-list-item

的类。

我想要路线完全匹配，可以添加

[routerLinkActiveOptions]="{exact: true}"

这会导致类似这样的事情：

<mat-nav-list>
    <a mat-list-item routerLink="/events" routerLinkActive="active">
        Events
    </a>
    <a mat-list-item routerLink="/contact" routerLinkActive="active">
        Contact
    </a>
    <a mat-list-item routerLink="/map" routerLinkActive="active">
        Map
    </a>
</mat-nav-list>

要自定义颜色，您可以在 css 中添加一个特殊的类

.active {
   background: lightred;
   color: red;
}

使用材质，您还可以覆盖 css 变量来实现您的目标。在你的例子中，是

--mdc-list-list-item-label-text-color

变量。您可以通过 chrome 检查器看到这一点，或者通过 styling 文档

使用 Angular 19

.active {
   --mdc-list-list-item-label-text-color: red;
}