如何将数据从模态传递到调用 angular 组件？

Question

callingmodal.component.ts

export class CallingmodalComponent implements OnInit {
    openDialog(): void {
        const dialogRef = this.dialog.open(SharemodalComponent, {
          width: '640px', disableClose: true
        });
        console.log(dialogRef);

      }
}

sharemodalComponent.component.ts

export class SharemodalComponent implements OnInit {
  onaddCus(): void {
    console.log(this.sharingWith);
    console.log(this.addCusForm.value.selectedPermissionType);
  }
}

单击一个按钮后，我调用 onaddCus()。在这个函数中，我想将 this.sharingWith 和 this.addCusForm.value.selectedPermissionType 传递给 callingmodal.component.ts。

如何将此参数传递给 callingmodal.component.ts？

Answer 1

将以下构造添加到您的 SharemodalComponent：

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
            public dialogRef: MatDialogRef<SharemodalComponent>) {}

然后您可以从 CallingmodalComponent 传递数据并订阅关闭事件：

const dialogRef = this.dialog.open(SharemodalComponent, {
      width: '640px', disableClose: true,
      data: { sharingWith: '100px', ... }
});

dialogRef.afterClosed().subscribe(result => {
  console.log(result );
});

如果您单击您的按钮，您可以关闭对话框并将数据传递给您的 CallingmodalComponent：

this.dialogRef.close('some data here');

Answer 2

我假设您是从 callingmodal 动态创建 sharemodalComponent。在这种情况下，您可以使用 singleton service 在它们之间共享数据。尝试以下

shared.service.ts

@Injectable({providedIn: 'root'})
export class SharedService {
  private _sharingWithSource = new BehaviorSubject<any>(null);
  private _selectedPermissionTypeSource = new BehaviorSubject<any>(null);
  
  public sharingWith$ = this._sharingWithSource.asObservable();
  public selectedPermissionType$ = this._selectedPermissionTypeSource.asObservable();

  set sharingWithSource(value: any) {
    this._sharingWithSource.next(value);
  }

  set selectedPermissionTypeSource(value: any) {
    this._selectedPermissionTypeSource.next(value);
  }
}

sharemodalComponent.component.ts

export class SharemodalComponent implements OnInit {
  constructor(private sharedService: SharedService) { }
  
  onaddCus(): void {
    this.sharedService.sharingWithSource = this.sharingWith;
    this.sharedService.selectedPermissionTypeSource = this.addCusForm.value.selectedPermissionType;
    console.log(this.sharingWith);
    console.log(this.addCusForm.value.selectedPermissionType);
  }
}

并且在调用模态组件中，订阅 ngOnInit 挂钩以捕获所有推送到可观察对象的通知。

callingmodal.component.ts

export class CallingmodalComponent implements OnInit, OnDestroy {
  completed$ = new Subject<any>();

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharingWith$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        if (value) {           // <-- default value is `null`
          this.sharingWith = value 
        }
      }
    );
 
    this.sharedService.selectedPermissionType$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        if (value) { 
          this.selectedPermissionType = value 
        }
      }
    );
  }

  openDialog(): void {
    const dialogRef = this.dialog.open(SharemodalComponent, {
      width: '640px', disableClose: true
    });
    console.log(dialogRef);
  }

  ngOnDestroy() {
    this.completed$.next();           // <-- close the observables
    this.completed$.complete();
  }
}

更新 - 说明

RxJS BehaviorSubject - 多播可观察 RxJS Subject 的变体。它可以保存当前推送给它的数据，并在订阅后立即发出。这就是它需要一个初始值（我们在这里使用 null）并且我们在赋值之前进行检查的原因。
next 行为主体的方法用于将新值推送到可观察对象。其他有效的推送通知方法是 error 和 complete。推送到 error 将调用观察者中的错误回调，调用 complete 将完成可观察流。
每当涉及订阅时，open/not-closed 订阅都可能发生内存泄漏。因此，在 OnDestroy 挂钩中关闭组件中的订阅始终是一个好习惯。一种方法是将订阅分配给局部变量并对其调用 unsubscribe()。其他优雅的方式是使用 RxJS takeUntil operator. More info about this approach here.
是 RxJS 团队核心成员对何时使用 asObservable() 函数的一个很好的解释。

如何将数据从模态传递到调用 angular 组件？

How to pass data from modal to calling angular component?

modal-dialog

angular-material

angular

angular-forms

mat-dialog

更新 - 说明