如何在mat-table选中指定行时将行数据传递给其他组件

实现效果参考：

1. 组件内存储选中的单号 #

修改表格所在组件的TS代码，新增变量存储选中的DR单号，点击行时完成赋值：

// 存储选中的Delivery Receipt#对应值
selectedReceiptNo: string = '';

selectedRow(row){
  console.log('selectedRow', row)
  // 替换成你行数据中存储DR单号的实际字段名，按现有代码transactionType列对应Transaction #，即DR开头单号
  this.selectedReceiptNo = row.transactionType;
}

2. 按实际场景传值 #

• 场景1：Delivery Receipt#字段在当前组件
  直接在模板中绑定变量即可，输入框场景示例：

<mat-form-field>
  <mat-label>Delivery Receipt#</mat-label>
  <input matInput [value]="selectedReceiptNo">
</mat-form-field>

纯文本展示直接使用{{ selectedReceiptNo }}。

• 场景2：传值给直接子组件
  子组件TS中声明输入参数接收值：

import { Input } from '@angular/core';

export class TargetChildComponent {
  @Input() receiptNo: string = '';
}

父组件模板中给子组件标签绑定参数：

<app-target-child [receiptNo]="selectedReceiptNo"></app-target-child>

子组件内可直接使用receiptNo获取选中行的单号。

• 场景3：传值给无父子关联的组件
  通过全局公共服务做值中转：

1. 新建公共服务，创建数据流存储单号：

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

@Injectable({ providedIn: 'root' })
export class DataTransferService {
  private readonly receiptNoSubject = new BehaviorSubject<string>('');
  public readonly currentReceiptNo$ = this.receiptNoSubject.asObservable();

  setReceiptNo(no: string): void {
    this.receiptNoSubject.next(no);
  }
}

2. 表格所在组件注入服务，选中行时触发更新：

import { DataTransferService } from './你的服务路径/data-transfer.service';

constructor(private dataTransfer: DataTransferService) {}

selectedRow(row){
  const currentNo = row.transactionType;
  this.dataTransfer.setReceiptNo(currentNo);
}

3. 接收值的组件注入服务，订阅数据流获取实时更新的单号：

import { DataTransferService } from './你的服务路径/data-transfer.service';

receiptNo: string = '';
constructor(private dataTransfer: DataTransferService) {}

ngOnInit(): void {
  this.dataTransfer.currentReceiptNo$.subscribe(no => {
    this.receiptNo = no;
    // 后续业务逻辑写在这里
  })
}

可选优化：选中行高亮 #

给选中行加样式反馈，修改mat-row模板：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;" 
  (click)="selectedRow(row)"
  [class.row-selected]="row.transactionType === selectedReceiptNo">
</mat-row>

对应样式：

.row-selected {
  background: #e3f2fd;
}

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