css - 我们可以在 Mat-card 中使用锚标签吗？

我想让 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>

答案＃1

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

答案＃2

为什么不将 mat-card 包裹在 <a> 中，但一定要去掉它的下划线样式

相关的 HTML:

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

相关的 CSS:

.removeStyle{
  text-decoration: none;
}

完整可用的 Stackblitz 示例