Angular 5 Material - 如何设置 mat-nav-list 锚链接在单击时处于活动状态

Question

如何将锚链接设置为在我的实施中处于活动状态。

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

.ts

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

.routing.module.ts

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

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

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

Answer 1

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

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

问题是 Angular Material 包中显然没有为活动状态定义样式：

角度材料/src/lib/list/_list-theme.scss

角度材料/src/lib/list/list.scss

因此必须定义一个活动样式：

.mat-nav-list a.active {
    background: blue;
}

Answer 2

routerLinkActive

是

routerLink

的属性，因此它只能与

routerLink

绑定一起使用。

要设置活动链接的样式，请将

routerLink

设置为路线的路径，并将

routerLinkActive

设置为您自己的类，您将使用它来指示“活动”。

例如：

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

现在使用 css 来定位链接：

.active-link {
    background-color: grey;
}

Answer 3

其他答案依赖于自定义类。然而，

mat-list-item

Answer 4

您可以使用

.mat-list-item-focus

类来聚焦列表项：

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

Answer 5

角 19：

如果您在描述选项卡上查看 RouterLinkActive 文档： https://angular.dev/api/router/RouterLinkActive?tab=description

它说：

要直接检查链接的 isActive 状态，请分配 RouterLinkActive 实例到模板变量。例如， 以下检查状态而不分配任何 CSS 类：

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

所以你可以这样做：

<mat-nav-list>
  <a mat-list-item routerLink="/my-route" routerLinkActive #rla="routerLinkActive" [activated]="rla.isActive">My Route</a>
</mat-nav-list>

Answer 6

尝试使用类似的东西：

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

有关更多信息，请访问 https://angular.io/guide/router#router-links