Angular Material 7：整行的链接答案

【问题标题】：Angular Material 7: Link for whole rowAngular Material 7：整行的链接
【发布时间】：2019-05-14 19:11:49
【问题描述】：

我正在使用 Angular Material 7 表（垫表）。我想要实现的是整个行的链接以显示详细信息页面。

要求是显示一个可以在新标签页中打开的真实链接，因此通常的（点击）事件不起作用。

我实现了在每个 mat-cell 的内容周围添加一个链接，但由于我有很多列，这不是一个好的解决方案。

有没有一种好方法可以将每个 mat-row 转换为链接（href）？

编辑：我删除了我的示例，因为下面给出了正确答案。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以添加Anuglar Material Docs 中定义的行。这样您就可以将 [routerLink] 添加到整行而不是单个单元格。

【讨论】：

我从“mat-table”更改为“table mat-table”以尝试您的链接。仅使用 [routerLink] 使行可点击，但浏览器不会将其检测为真实链接。我必须以某种方式将行包装在“a”标签中。

【解决方案2】：

将 routerLink 添加到 mat-row

<mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="'transaction/' + row.id" class="row-hover"></mat-row>

或

您可以将点击事件和自定义 css 类添加到 mat-row：

<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="navigateTo(row)" class="row-hover"></mat-row>

然后在 .ts 文件中：

import { Router } from '@angular/router';
...
...
constructor(private router: Router) {}
...
navigateTo(row: any) {
  this.router.navigate(['/maintenance/data/'+row.id]);
}

并添加css类

.row-link:hover {
  background-color: rgba(0, 0, 0, .05);
  cursor: pointer;
}

【讨论】：

谢谢，但这仍然不是真正的链接。我试图创建一个包装器指令，但由于 matRowDef 已经是一个指令，所以变得非常困难。
没有这些解决方案是可访问的。应该允许在新选项卡中打开链接，或通过右键单击复制 URL。但是，使用此解决方案是不可能的。也无法通过用键盘聚焦并按 Enter 来打开链接。这是不好的做法。
rounterLink 应该这样声明：[routerLink]="'transaction/' + row.id" 否则它不会工作
请确保您所在的模块已导入RouterModule，以便routerLink按预期工作。
完美的答案，但是在我的 CSS 中，我不得不使用语法 tr.mat-row:hover 来让它工作，这要感谢 Sebastian Castaldi (stackoverflow.com/a/57399567/10287733) 的回答

【解决方案3】：

好吧，您可以在整行上使用空 a 标记的经典技巧。只需将标签放入 仅一个 的 ng-containers 中，并为其提供自定义 css 规则：

<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let element">
      {{element.name}}          
      <a fxFlexFill [routerLink]="'/maintenance/data/'+element.id" class="mat-row-link"></a>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="lastname">
    <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
    <mat-cell *matCellDef="let element">          
      {{element.lastname}}
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

然后在 CSS 上：

.mat-row{        
    position: relative;
}

.mat-row-link{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;             
}

请记住，一个空的 a 标签可以完成这项工作，但并不符合所有 SEO 标准...

【讨论】：

非常感谢，它有效！我将 css 放在我们的全局样式表中，所以这对我们来说是一个很好的解决方案 :-)
编辑：这个解决方案的问题是不能再标记行数据（复制粘贴数据）：-/
这似乎是一个不错的方法，但不幸的是它对我不起作用。我添加了一些文本（以查看位置的位置），当我这样做时，我会在视口顶部而不是在行中看到文本。不知何故， position:relative 不适用于.mat-row，而是针对页面。没有看到任何其他位置：亲戚也链接了链条。
@RickStrahl 对我来说也一样。你找到解决方案了吗？
这似乎覆盖了整个表格，而不仅仅是行

【解决方案4】：

您可以将整行包装在一个标签中，然后将 routerLink 添加到该标签中。使用该解决方案，您将获得本机链接处理。我正在使用 cdk-table，但我想这也应该适用于角材料表。

我的解决方案如下：

<cdk-table [dataSource]="data">
    ...
    <a *cdkRowDef="let row; columns; columns" [routerLink]="['path', row.id]">
        <cdk-row></cdk-row>
    </a>
</cdk-table>

【讨论】：