Question

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

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

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

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

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

Answer 1

将routerLink添加到行

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

OR

您可以将点击事件和自定义CSS类添加到行-行：

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

Answer 2

好吧，您可以在整个行中使用 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标准...

Answer 3

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

Answer 4

您可以将整行包装在一个 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>

角材料7：整行链接

4 个答案: