选择特定行时如何将数据获取到另一个组件

Question

当我在此处使用Mat-able选择特定行时，我正在尝试获取数据，

这是我要做什么的示例，通过获得DR20220000013将传递到交付收据＃

.html

<mat-table [dataSource]="DeliveryReceipt">

<ng-container matColumnDef="transactionType">
<mat-header-cell *matHeaderCellDef>Transaction #</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.transactionType}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" 
(click)="selectedRow(row)"></mat-row>
          </mat-table>

.ts

selectedRow(row){
  console.log('selectedRow', row)
}

Answer 1

在组件之间共享数据的许多方法，输入绑定，服务您命名... https：// angular。 io/guide/inputs-utputs

，但是我在这里围绕着一个肢体，猜测有什么用。上覆的Mat-table选择该行似乎是对话模式。

模式可能是从父组件中开放的，很可能是交付收据＃也是吗？

因此，当我们打开模式时，我们将订阅模式。当模态关闭时，我们将开始聆听模态发出的值（即当用户do selectedrow（）我们关闭模态并返回值时）。然后将返回值捕获并馈送到交货收据＃。

父级中

  constructor(public dialog: MatDialog) {}

  deliveryReciept: any; 

  // here we open the modal, and pass in data for mat-table
  // your modal name is probably different
  openDialog(): void {
    const dialogRef = this.dialog.open(DeliveryRecieptDialog, { 
      width: '250px',
      data: {DeliveryReceipt: this.DeliveryReceipt, selectedReceipt: null},
    });

    // here we listen to what user selected
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.deliveryReciept = result.selectedReceipt;
    });
  }

在模式中的

  DeliveryReceipt: any;
  selectedReceipt: any;

  constructor(
    public dialogRef: MatDialogRef<DeliveryRecieptDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
  ) {

  this.DeliveryReceipt = data.DeliveryReceipt;
  this.selectedReceipt = data.selectedReceipt;
}

selectedRow(row){
  console.log('selectedRow', row);
  this.selectedReceipt = row
  this.dialogRef.close();
}

：以上是一个解释，如何从模态返回数据，然后使用打开的返回数据，您可能必须更改先前的代码才能在项目中实际工作。

Answer 2

最简单的方法是使用共享服务

服务

@Injectable({
  providedIn: 'root'
})
export class TransactionService {
  transactionCode = '';
}

与表

constructor(private transactionService: TransactionService) {};

selectedRow(row){
  this.transactionService.transactionCode = row;
}

组件

constructor(private transactionService: TransactionService) {};

get transactionCode() {
   return this.transactionService.transactionCode;
}

someMethod() {
  console.log(this.transactionCode);
}

<p>{{ transactionCode }}</p>