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>

标签： angular

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>

组件.ts

export class MyComponent {
  activeComponent = 'login';
}