Angular9 Как разрешить циклические зависимости для всплывающих окон с помощью сервиса - PullRequest
0 голосов
/ 20 марта 2020

Ситуация:

У меня есть два всплывающих окна в моей системе, одно для «Регистрация» и одно для «Вход». Я использовал службу, чтобы открыть всплывающее окно при нажатии на вход или зарегистрируйте кнопку.

Сервис:

export class AuthDialogService {

constructor(public dialog: DialogService) { }

loginDialog() {
  const data = DialogData.login;
  const dialogRef = this.dialog.openModel(LoginComponent, data);

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

 registerDialog() {
    const data = DialogData.register;
    const dialogRef = this.dialog.openModel(RegisterDialogComponent, data);

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

Заголовок компонента. html

<button (click)="">Login</button>
<button (click)="">Register</button>

HeaderComponent.ts

 openLoginDialog(): void {
    this.authDialogService.loginDialog();
}

openRegisterDialog(): void {
    this.authDialogService.registerDialog();
}

Проблема: у меня есть кнопка входа в систему во всплывающем окне регистрации и кнопка регистрации во всплывающем окне входа в систему, и у меня есть тот же метод вызова из службы в LoginComponent и RegisterDialogComponent

LooginComponent. html

<button type="submit" mat-stroked-button class="btn" (click)="authDialogService.registerDialog()">REGISTER NOW</button>

RegisterComponent. html

<button type="submit" mat-stroked-button class="btn" (click)="authDialogService.loginDialog()">LOGIN NOW</button>
...