角材料7：整行链接

Question

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

要求是显示可以在新选项卡中打开的真实链接，因此通常的（单击）事件不起作用。

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

有没有一种很好的方法将每个行转换为链接（href）？

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

Answer 1

那么，你可以做一个空的经典绝招一个标签整行了。只需将标签放入其中一个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 标准...

Answer 2

您可以将整行包裹在 a 标记中，并将 routerLink 添加到其中。通过该解决方案，您将获得本机链接处理。我正在使用 cdk-table，但我想这也应该适用于角度材料表。

我的解决方案如下所示：

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

Answer 3

将routerLink添加到行

<mat-row *matRowDef="let row; columns: displayedColumns;" routerLink="/maintenance/data/'+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;
}