当单击 Angular 中的另一个组件时，从 mat-table 传递数据行 7

Question

我想将整行传递给其他组件以显示此数据，任何人都有办法做到这一点。

Html:

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

ts:

  //Get row data when the click
  getRecord(row){
      // Do somthing ..... //
  }

我找了很多，找不到路

Answer 1

兄弟之间传递数据的方法可能不止一种，但Angular方法是使用服务：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service.

您还可以通过事件传递数据。让行点击触发父组件接收的事件，然后通过函数传递给子 table 的兄弟。

Answer 2

我在点击该行后通过以下步骤解决了我的问题：

1. 将数据保存在服务文件的变量中。
2. 使用导航进行路由。
3. 从服务文件中的变量中获取数据。

   public  getRecord(row : any){
    console.log(row);
     this.userservice.dataRow = row;
     this.router.navigate(['/profile']);
  }

服务文件：

    //Temporarily stores row data from mat-table
    dataRow:any;

profile.ts:

    this.dataRow = this.userservice.dataRow;