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

Question

Я использую Angular Material 7 таблиц (мат-стол).Чего я хочу добиться, так это ссылки на целую строку, чтобы показать страницу сведений.

Требуется показать реальную ссылку , которую можно открыть на новой вкладке, поэтомуобычное (click) -event не работает.

Мне удалось добавить ссылку вокруг содержимого каждой ячейки mat, но, поскольку у меня много столбцов, это не очень хорошее решение.

Есть ли хороший способ преобразовать каждую строку матов в ссылку (href)?

Редактировать: я удалил свой пример, так как правильный ответ был дан ниже.

Answer 1

Добавить routerLink к mat-row

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

Answer 2

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

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

Answer 3

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