Angular 8 中模态的循环依赖

Question

我有一个登录模式，带有一个用于打开注册模式的按钮，而注册模式有一个用于返回登录模式的按钮。这会产生循环依赖，我不知道如何解决这个问题..

public dialog: MatDialog

在登录模式中：

goRegister() {
this.dialog.closeAll();
this.dialog.open(RegisterComponent);
}

在寄存器模态：

goLogin() {
this.dialog.closeAll();
this.dialog.open(LoginComponent);
}

Answer 1

对我来说，更好的修复方法是将打开的模态方法移至父组件。在你的模式中使用 MatDialogRef 来关闭它并得到一些结果。它可以帮助您将数据传递给父组件，根据您构建下一个逻辑的数据。例如：

constructor(private dialogRef: MatDialogRef<RegisterComponent>){}

close(showLoginModal: boolean): void {
 this.dialogRef.close(showLoginModal)
}

并在父组件中显示模态并订阅模态关闭。

constructor(private dialog: MatDialog){}

openRegisterComponent(): void {
  this.dialog.open(RegisterComponent)
      .afterClosed()
      .subscribe(showLoginModal => showLoginModal && this.openLoginComponent();
}

openLoginComponent(): void {
  this.dialog.open(LoginComponent)
      .afterClosed()
      .subscribe(showRegisterComponent => showRegisterComponent && this.openRegisterComponent();
}

Answer 2

尝试在您的组件中始终使用聪明和愚蠢的概念。将两个组件封装在一个父组件中，并使用事件发射器将两个子组件传递给父组件。当父组件接收到该事件时，他将做他想做的事情（在那种情况下打开另一个模态）。

Angular 8 中模态的循环依赖

Circular Dependency on Modals in Angular 8

modal-dialog

typescript

angular