显示/隐藏组件角超过一次

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

您可以使用单个属性来避免管理多个属性：

<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';
}

Answer 2

你的逻辑有问题。没有为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>