我们可以将 Mat-card 与 Anchor Tag 一起使用吗？

Question

我想让垫卡可以点击，当我将鼠标悬停在垫卡上时，我想显示 link 光标。有很多卡片，当我单击其中一张卡片时，我想导航到另一个页面。我怎样才能做到这一点？

在我的模板中使用下面的代码是否合适html.

<a mat-card   routerLink= ...>  Buy  </a>

我的第一次尝试是

        <div fxLayout="row rap">
           <mat-card> 
                <mat-card-content> 
                   <div> 0 </div> 
                   <div> 3000 ETB</div>
               </mat-card-content> 
           </mat-card>
        <mat-card> .... </mat-card>
     </div>

Answer 1

为什么不将垫卡包裹在 <a> 中，但一定要删除上面的下划线样式

相关HTML:

<a class='removeStyle' href='#'>
    <mat-card class="example-card">
    ....
    </mat-card>
</a>

相关CSS:

.removeStyle{
  text-decoration: none;
}

完成working stackblitz here

Answer 2

HTML

<mat-card (click)="redirect(100)"> 
    <mat-card-content> 
        <div> 0 </div> 
        <div> 3000 ETB</div>
    </mat-card-content> 
</mat-card>

<mat-card (click)="redirect(200)"> 
    <mat-card-content> 
        <div> 0 </div> 
        <div> 4000 ETB</div>
    </mat-card-content> 
</mat-card>

CSS

mat-card {
  cursor: pointer;
  margin-bottom: 1rem;
}

TS

redirect(id) {
    alert('Called from ' + id);
  }

可行的解决方案：https://stackblitz.com/edit/angular-zr3tqo

Answer 3

<a *ngFor="let card of childCards" [routerLink]="[card?.targetUrl]"> 在锚标签内写入垫卡代码。