在Angular 9中使用Angular Material Dialog发送数据，而不关闭它

Question

我使用 Angular 9，我正在使用 Angular Material 中的对话框功能，您可以查看其中的示例。 我想在某个时候向主要组件发送信息，而不关闭对话框。 https://material.angular.io/components/dialog/examples

不使用下面的代码，我可以在不关闭对话框的情况下发送数据

this.dialogRof.colse(data);

示例：

app.component.html：

<button (click)="addUser()">

app.component.ts：

addUser(){
    const dialogRef = this.dialog.open(AddUser, {
      width: '350px'
    });
}

add-user.component.ts:

name="Aliakbar";
send(){
  // Send name to app-component without closing add-user-component
}

我该怎么做？

Answer 1

添加用户组件.ts

public name$ = new Subject<string>();

send () {
  this.name$.next(this.name);
}

还有 app.component.ts

addUser(){
  const dialogRef = this.dialog.open(AddUser, {
    width: '350px'
  });

  dialogRef.componentInstance.name$
    .pipe(takeUntil(dialogRef.afterClosed()))
    .subscribe((name) => {
      console.log(name);
  });
}

我不确定 takeUntil 在这里是否能正常工作，但你需要在关闭它后以某种方式取消订阅。

Answer 2

我的想法是创建一个简单的服务，该服务将保存对话框中的数据，并且可以从父组件中获取这些数据。

add-user-dialog.service.ts

private name = new BehaviorSubject<string>(undefined);

constructor(
  ...
  private addUserDialogService: AddUserDialogService,
  ...
) {}

getName() {
  return this.name.asObservable();
}

setName(name: string) {
  this.name.next(name);
}

add-user.component.ts

name = 'Aliakbar';

constructor(
  private addUserDialogService: AddUserDialogService,
) { }

send() {
  this.addUserDialogService.setName(this.name);
}

app.component.ts

addUserDataSubscription: Subscription;

constructor(
  ...
  private addUserDialogService: AddUserDialogService,
  ...
) {}

ngOnInit() {
  this.addUserDataSubscription = this.addUserDialogService.getName().subscribe(name => {
    // do what you need with the dialog data
  }
}

ngOnDestroy() {
  this.addUserDataSubscription.unsubscribe();
}