角材质，使 <mat-chip> 可点击答案

【问题标题】：Angular Material, make <mat-chip> clickable角材质，使 <mat-chip> 可点击
【发布时间】：2021-07-07 18:15:22
【问题描述】：

我正在使用来自 material.angular.io 的 mat-chips

<mat-chip-list class="categories">
    <mat-chip><a href="/publication/category/{{category.id}}">
    {{category.name}}</a></mat-chip>
</mat-chip-list>

如果我用鼠标的中心按钮单击链接，则链接有效并打开另一个选项卡，但我无法通过左键单击打开链接。

我尝试了 class="link-overlapping"，但仍然无法正常工作。

【问题讨论】：

标签： html angular angular-material

【解决方案1】：

你根本不需要锚，你可以直接在mat-chip上使用routerLink：

<mat-chip-list class="categories">
  <mat-chip [routerLink]="['publication/category', category.id]">
    {{category.name}}
  </mat-chip>
</mat-chip-list>

【讨论】：

外部链接呢？
路由器不适用于外部链接。你需要一个带有href 的锚。
有没有简单的方法将标签设置为芯片？

【解决方案2】：

您是否尝试过使用 routerLink？它对我有用。

  <mat-chip-list class="categories">
      <mat-chip><a [routerLink]="['/your_path']">{{ data }} </a></mat-chip>
    </mat-chip-list>
  </div>

【讨论】：

【解决方案3】：

我建议这样

<mat-chip><a routerLink="/test" class="mat-standard-chip" style="margin:0; padding:0;">My link</a></mat-chip>

这样当鼠标悬停时，链接就会显示在屏幕的左下方。

【讨论】：