typescript 如何在 angular 6 的 mat-nav-list 中设置活动项的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52593815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set color of active item in mat-nav-list in angular 6
提问by Zhu
I am new to angular 6 ,here I have a mat-toolbar with mat-sidenav .Everything is working well but I want to set a color for the active item in side nav menu.
我是 angular 6 的新手，这里我有一个带有 mat-sidenav 的 mat-toolbar。一切都运行良好，但我想为侧边导航菜单中的活动项设置颜色。
currently I have BLACK background I want to set a color when I select the item in the mat-nav-list and also I tried to set mat-divider between each item that also not working .
目前我有黑色背景，当我选择 mat-nav-list 中的项目时，我想设置一种颜色，并且我尝试在每个也不起作用的项目之间设置 mat-divider 。
app.component.html
应用程序组件.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black"> //current background is black
<mat-toolbar class="menuBar">Menus</mat-toolbar>
<mat-nav-list>
<a class="menuTextColor" mat-list-item href="#">Link 1</a> // want to change the color of the selected item.
<a class="menuTextColor" mat-list-item href="#">Link 2</a> // want to set divider between each item
<a class="menuTextColor" mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="toolbar">
<button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span class="toolbarHeading">Demo App</span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>
Can anyone help me to fix this .
谁能帮我解决这个问题。
回答by Edric
This can be done if you're using Angular Router with the routerLinkActiveattribute.
如果您将 Angular Router 与该routerLinkActive属性一起使用，则可以这样做。
From the documentation for the RouterLinkActivedirective:
Lets you add a CSS class to an element when the link's route becomes active.
Description
This directive lets you add a CSS class to an element when the link's route becomes active.
Consider the following example:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>When the URL is either
/useror/user/bob, the active-link class will be added to the<a>tag. If the URL changes, the class will be removed.
允许您在链接的路由变为活动状态时向元素添加 CSS 类。
描述
当链接的路由变为活动状态时，此指令允许您向元素添加 CSS 类。
考虑以下示例：
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>当 URL 为
/user或 时/user/bob，活动链接类将被添加到<a>标签中。如果 URL 更改，则该类将被删除。
The code below showcases a typical use case:
下面的代码展示了一个典型的用例：
<mat-nav-list>
<a mat-list-item routerLink="/home" routerLinkActive="active-list-item">Home</a>
<a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">Settings</a>
<a mat-list-item routerLink="/about" routerLinkActive="active-list-item">About</a>
</mat-nav-list>
.active-list-item {
color: #3F51B5 !important; /* Note: You could also use a custom theme */
}
A couple of notes:
一些注意事项：
- You can change
active-list-itemto whatever class name you would like to be applied. - The
!importantdeclaration in the second code snippet is used as the list item styles take precedence over your custom styles.
- 您可以更改
active-list-item为您想要应用的任何类名。 !important第二个代码片段中的声明用作列表项样式优先于您的自定义样式。
Here's a Stackblitz.
这是一个Stackblitz。
回答by Kacpers
In Angular Materials 9.0 you have to change color for following class:
在 Angular Materials 9.0 中，您必须更改以下类的颜色：
a.mat-list-item.active { color: #ccc; }
回答by Boris Pancisek
hope I'm not too late for this one. I had same problem with mat-nav-listand mat-menuso with few lines of css I could make it function as I wanted it, try it and see if it fits your needs, scss below:
希望我对这个还不算太晚。我有同样的问题mat-nav-list，并mat-menu因此与CSS的几行，我可以让IT部门作为我想要它，尝试一下，看看它是否适合你的需要，下面SCSS：
[class^='mat-list-'] {
&:hover:active {
background: rgba(255, 255, 255, 0.04);
}
&:focus,
.mat-list-text {
background: none !important;
}
}
[mat-menu-item].is-active,
[mat-list-item].is-active {
background: hsla(0, 0%, 100%, 0.1) !important;
}
Now I have custom dark theme so you might want to set colors after your choice.
Just add routerLinkActive="is-active"and you are set to go.
现在我有自定义的深色主题，所以你可能想在你选择后设置颜色。只需添加routerLinkActive="is-active"，您就可以开始了。
/Best regards
/最好的祝福
