如何将Angular Material mat-table行数据传递至另一组件并展示

问题场景 #

使用Angular Material的mat-table组件时，需要点击表格某一行，将该行的item和price数据传递到另一个组件并展示，尝试多种方法未成功，以下是两个组件的原始代码：

表格组件（第一个组件）HTML #

<section class="example-container mat-elevation-z8" tabindex="0" >
        <table mat-table [dataSource]="tiffinMenu1">

          <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef> ITEM </th>
            <td mat-cell matRipple *matCellDef="let tiffinOne" ngDefaultControl > {{tiffinOne.item}} </td>
          </ng-container>

          <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef> PRICE </th>
            <td mat-cell *matCellDef="let tiffinOne"> {{tiffinOne.price}} </td>
          </ng-container>

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

        </table>
      </section> 

展示组件（第二个组件）HTML #

<div class="split right">
    <div class="centered">
        <p>Token Number: 02</p>
    </div>

    <p>Working:</p>

<!-- 此处需要展示来自另一组件的{{tiffinOne.item}}和{{tiffinOne.price}} -->

    <button>Print</button>
    <button>Cancel</button>
</div>

两种可行解决方案 #

方案一：路由传参（适用于路由跳转场景） #

1. 给表格行添加点击事件

修改表格组件的mat-row，绑定点击事件并传递当前行数据：

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="navigateToDetail(row)"></tr>

2. 表格组件TS实现路由跳转传参

导入Router，在点击事件中导航到目标组件并携带参数：

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToDetail(row: any) {
  this.router.navigate(['/你的目标组件路由路径'], {
    queryParams: {
      item: row.item,
      price: row.price
    }
  });
}

3. 展示组件TS接收参数

导入ActivatedRoute，订阅路由参数获取数据：

import { ActivatedRoute } from '@angular/router';

tiffinOne: { item: string; price: string } = { item: '', price: '' };

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  this.route.queryParams.subscribe(params => {
    this.tiffinOne.item = params['item'];
    this.tiffinOne.price = params['price'];
  });
}

4. 展示组件HTML渲染数据

<p>Working:</p>
<p>Item: {{tiffinOne.item}}</p>
<p>Price: {{tiffinOne.price}}</p>

方案二：共享服务传值（适用于无路由跳转或组件通信场景） #

1. 创建数据共享服务

生成一个全局服务用于传递数据：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RowDataService {
  private selectedRow = new BehaviorSubject<any>(null);
  selectedRow$ = this.selectedRow.asObservable();

  sendRowData(data: any): void {
    this.selectedRow.next(data);
  }
}

2. 表格组件调用服务发送数据

修改表格行点击事件，通过服务传递当前行数据：

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="sendRowData(row)"></tr>

表格组件TS注入服务并发送数据：

import { RowDataService } from '../row-data.service';

constructor(private rowDataService: RowDataService) {}

sendRowData(row: any): void {
  this.rowDataService.sendRowData(row);
  // 如需跳转可在此添加路由导航
  // this.router.navigate(['/目标组件路径']);
}

3. 展示组件订阅服务获取数据

展示组件TS注入服务并订阅数据：

import { RowDataService } from '../row-data.service';

tiffinOne: any = {};

constructor(private rowDataService: RowDataService) {}

ngOnInit(): void {
  this.rowDataService.selectedRow$.subscribe(data => {
    if (data) {
      this.tiffinOne = data;
    }
  });
}

4. 展示组件HTML渲染数据

同方案一的第四步，直接渲染即可。

内容的提问来源于stack exchange，提问作者Naga Teja