可点击角材料卡

Question

我想将路由器链接添加到席卡组件以使卡可点击。我的组件是这样的：

<mat-card class="card" >
     <mat-card-content>
          <mat-card-title> {{title}}</mat-card-title>
          <mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
     </mat-card-content>
</mat-card>

如何做到这一点？

谢谢。

Answer 1

<mat-card (click)="doStuff()" class="card" >
     <mat-card-content>
          <mat-card-title> {{title}}</mat-card-title>
          <mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
     </mat-card-content>
</mat-card>

然后它应该处理点击

Answer 2

只需使用 routerLink

<mat-card-content  routerLink = "path">

Answer 3

如果您需要在导航之前进行任何操作。最佳实践是使用单击方法来处理任何操作和导航，

html

<mat-card class="card" (click)="navigate()">
     <mat-card-content>
          <mat-card-title> {{title}}</mat-card-title>
          <mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
     </mat-card-content>
</mat-card>

Ts

import { Router } from '@angular/router';

constructor(private router:Router){
}
navigate(){
//do your any operations
this.router.navigate(['path']);
//also you can pass like this,
 this.router.navigateByURL(['path']);
}