在Mat-Toolbar中选中被点击的链接,可以通过以下步骤实现:
(click)
指令来实现。例如:<mat-toolbar>
<a mat-button (click)="selectLink('link1')">Link 1</a>
<a mat-button (click)="selectLink('link2')">Link 2</a>
<a mat-button (click)="selectLink('link3')">Link 3</a>
</mat-toolbar>
selectLink
方法来处理链接的点击事件。该方法会接收被点击链接的标识作为参数,并将其保存在组件的一个变量中,以便后续使用。例如:selectedLink: string;
selectLink(link: string) {
this.selectedLink = link;
}
[class.active]
来绑定一个CSS类,用于表示选中状态。例如:<mat-toolbar>
<a mat-button [class.active]="selectedLink === 'link1'" (click)="selectLink('link1')">Link 1</a>
<a mat-button [class.active]="selectedLink === 'link2'" (click)="selectLink('link2')">Link 2</a>
<a mat-button [class.active]="selectedLink === 'link3'" (click)="selectLink('link3')">Link 3</a>
</mat-toolbar>
.active
类的样式,以突出显示选中的链接。例如:.active {
background-color: #e0e0e0;
color: #000000;
}
通过以上步骤,当用户点击某个链接时,该链接会被设置为选中状态,从而改变其外观以示区别。同时,通过selectedLink
变量,可以在组件中获取当前选中的链接标识,以便进行后续的处理。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅为示例,实际使用时请根据需求选择适合的腾讯云产品。
领取专属 10元无门槛券
手把手带您无忧上云