angular - 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();
}