Угловой материал 7: ссылка для всего ряда

Вы можете добавить строку, как определено в Документы по материалам Angular. Таким образом, вы можете добавить [routerLink] ко всей строке, а не к отдельным ячейкам.

Добавить routerLink к мат-ряд

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

ИЛИ

Вы можете добавить событие клика и собственный класс 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;
}

Что ж, вы можете проделать классический трюк с пустым тегом а по всей строке. Просто поместите тег в только один ng-контейнеров и дайте ему настраиваемое правило 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;             
}

Просто помните, что пустой тег а сделает работу, но не соответствует всем стандартам SEO ...

Вы можете заключить всю строку в a-тег и добавить к нему routerLink. С этим решением вы получите встроенную обработку ссылок. Я использую cdk-table, но полагаю, что это также должно работать для таблицы материалов angular.

Мое решение выглядит следующим образом:

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