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

【问题标题】：Can we use Mat-card with Anchor Tag?我们可以将 Mat-card 与 Anchor Tag 一起使用吗？
【发布时间】：2021-11-13 08:07:26
【问题描述】：

我想让 mat-card 成为可点击的，当我将鼠标悬停在 mat-card 上时，我想显示链接光标。当我单击要导航到另一个页面的一张卡片时，会有很多卡片。我怎样才能做到这一点？

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

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

我的第一次尝试是

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

【问题讨论】：

链接光标是什么意思？你的意思是cursor: pointer？

标签： css angular typescript angular-material mat-card

【解决方案1】：

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

【讨论】：

这是全宇宙最好的解决方案。

【解决方案2】：

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

相关的CSS：

.removeStyle{
  text-decoration: none;
}

完成working stackblitz here

【讨论】：

你说得对，我用的例子有按钮，但提问者只想用内容，没有<mat-card-actions>
对我来说，锚标签可以在不删除 mat-card 标签内的样式的情况下工作。

【解决方案3】：

HTML

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

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

CSS

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

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

工作解决方案：https://stackblitz.com/edit/angular-zr3tqo

【讨论】：