1

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

3 回答 3

4

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

于 2021-05-15T15:09:04.170 回答
1

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

相关的 HTML：

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

相关的 CSS：

.removeStyle{
  text-decoration: none;
}

在这里完成工作堆栈闪电战

于 2019-09-20T05:08:22.707 回答
0

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;
}

TS

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

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

于 2019-09-20T05:12:24.850 回答