показать / скрыть компонент angular более одного раза

Question

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

Мой код работает только один раз: когда пользователь нажимает «логин», показывать компонент входа в систему и скрывать «регистр», когда пользователь нажимает «регистрировать», показывать компонент регистрации и скрывать компонент «входа».

, но если я нажимаю снова при входе в систему по-прежнему отображается компонент регистрации.

здесь мой код:

<button pButton label="register" (click)="registerOn= true">הרשמה</button>
<button pButton label="login" (click)="loginOn= true">כניסה</button>
<app-register *ngIf="registerOn"></app-register>
<app-login *ngIf="loginOn&&!registerOn"></app-login>

Answer 1

Есть проблема с вашей логикой c. Переменным registerOn и loginOn не присвоено никакого ложного значения. Вы можете изменить его, как показано ниже, используя только одну переменную

<button pButton label="register" (click)="registerOn= true">הרשמה</button>
<button pButton label="login" (click)="registerOn= false">כניסה</button>
<app-register *ngIf="registerOn; else loginBlock"></app-register>
<ng-template #loginBlock><app-login> </app-login></ng-template>

Answer 2

Вы можете использовать одно свойство, чтобы избежать необходимости управлять несколькими свойствами:

<button pButton label="register" (click)="activeComponent='register'">הרשמה</button>
<button pButton label="login" (click)="activeComponent='login'">כניסה</button>
<app-register *ngIf="activeComponent === 'register'"></app-register>
<app-login *ngIf="activeComponent === 'login'"></app-login>

component.ts

export class MyComponent {
  activeComponent = 'login';
}