Ситуация:
У меня есть два всплывающих окна в моей системе, одно для «Регистрация» и одно для «Вход». Я использовал службу, чтобы открыть всплывающее окно при нажатии на вход или зарегистрируйте кнопку.
Сервис:
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>