Angular 5材质-如何将mat nav list锚点链接设置为在单击时激活

如何在实现中设置活动的锚定链接

.html

<mat-nav-list class="conversation-list">
    <mat-list-item *ngFor="let conversation of conversations">
        <a (click)="goToChat(conversation)">{{getOtherUsers(conversation)}}</a>
    </mat-list-item>
</mat-nav-list>

<div class="chat-box">
    <router-outlet></router-outlet>
</div>

.routing.module.ts

goToChat(conversation) {
    this.router.navigate(['main/chat/', conversation._id]);
}

import { ChatComponent } from './chat.component';
import { ChatDetailComponent } from './chat-detail/chat-detail.component';

const CHAT_ROUTES = [
    {
        path: '',
        component: ChatComponent,
        children: [
            {
                path: ':id',
                component: ChatDetailComponent
            }
        ]
    },
];

---

上面的代码在用户对话中循环，并创建他们正在聊天的用户列表。每个列表项都是指向页面右侧聊天组件的链接。当用户单击某个链接时，我希望将其设置为活动状态。

请尝试使用类似的方法：

<a [routerLink]="['main/chat/',conversation._id]">{{getOtherUsers(conversation)}}</a>

---

通过添加routerLinkActive指令，将锚点设置为类“active”：

<mat-nav-list>
    <a mat-list-item routerLinkActive="active">{{link.title}}</a>
</mat-nav-list>

routerLinkActive
是
routerLink
的属性，因此它只能与
routerLink
绑定一起使用

要设置活动链接的样式，请将
routerLink
设置为路由路径，并将
routerLinkActive
设置为您自己的类，以指示“活动”

例如：

<a [routerLink]=`main/chat/'${conversation._id}` 
    routerLinkActive="active-link">{{getOtherUsers(conversation)}}</a>

您可以使用
.mat列表项焦点
类来聚焦列表项：

<mat-nav-list>
  <mat-list-item class="mat-list-item-focus">Focused List Item</mat-list-item>
  <mat-list-item>Not Focused List Item</mat-list-item>
</mat-nav-list>


重点列表项
非焦点列表项
Uncaught（承诺中）：错误：无法匹配任何路由。URL段：我为这个模块添加了我的路由器{{getOtherUsers（conversation）}}这可以工作，但它没有激活我的链接？链接未高亮显示我尝试为其提供routerLinkActive=“active”，但未起作用尝试
const CHAT_ROUTES=[{path:''，component:ChatComponent，children:[{path:'main/CHAT/:id'，component:ChatDetailComponent}]}，]
.active-link {
    background-color: grey;
}

<mat-nav-list>
  <mat-list-item class="mat-list-item-focus">Focused List Item</mat-list-item>
  <mat-list-item>Not Focused List Item</mat-list-item>
</mat-nav-list>