Angular 材料：将数据从一个组件传递到另一个组件

Question

嗨 - 我有两个组件，第一个组件（ShowDepComponent）具有 ngFor 来收集“DapatmentName”和 DepartmentID”。 我想将这些“部门名称”传递给另一个组件（AddEditDepComponent）。 当触发点击事件时，DepartmentName 应该传递给另一个组件（AddEditDepComponent）。 怎么做？ 谢谢。

显示深度组件：

html：

... ... <ng-container *ngFor="let eachone of GetDepartList"> <mat-grid-tile [style.background]="'#F1EBBA'"> {{eachone.DepartmentId}} <mat-grid -tile [(ngModel)]="DepartmentName" [style.background]="'#F1EBBA'"> {{eachone.DepartmentName}} <mat-grid-tile [style.background]="'#F1EBBA'"> <button (click) = "EditDeprt()" class="Options" mat-stroked-button> 编辑 <button (click) = "DelDeprt()" mat-stroked-button> 删除在此处输入代码

• .ts 文件：

  .. .. 部门名称：任何； 部门：任何； EditDeprt() { this.Dialog.open(AddEditDepComponent, { height: '200px', width: '400px', data: {DepartmentName: this.DepartmentName} })

Answer 1

到目前为止您所做的是正确的，剩下的唯一事情就是在您的AddEditDepComponent中获取Department名称。

因此，在您的AddEditDepComponent中，您可以将您从ShowDepComponent发送的数据注入其构造函数。 您已经使用dialog.open()方法发送了数据。

您所要做的就是在AddEditDepComponent .ts 中获取该数据：

 constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
 ){}

 ngOnInit(): void {
 console.log(this.data.DepartmentName);
 }