如何将 anchor 链接设置为在我的实现中处于事件状态。
.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
}
]
},
];
以上代码遍历用户对话并创建他们正在聊天的用户列表。每个列表项都是指向页面右侧聊天组件的链接。当用户单击链接时,我希望将其设置为事件状态。
最佳答案
通过添加 routerLinkActive 指令将 anchor 设置为具有“事件”类:
<mat-nav-list>
<a mat-list-item routerLinkActive="active">{{link.title}}</a>
</mat-nav-list>
问题是 Angular Material 包中显然没有为事件状态定义样式:
Angular Material/src/lib/list/_list-theme.scss
Angular Material/src/lib/list/list.scss
所以必须定义一个事件样式:
.mat-nav-list a.active {
background: blue;
}
关于Angular 5 Material - 如何将 mat-nav-list anchor 链接设置为在单击时处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47391582/