多次显示/隐藏组件角度答案

【问题标题】：show/ hide component angular more then once多次显示/隐藏组件角度
【发布时间】：2020-03-27 18:05:22
【问题描述】：

我想实现如下：当用户点击“登录”时显示登录组件并隐藏“注册”组件，当用户点击“注册”时显示注册组件并隐藏“登录”组件。

我的代码只工作一次：当用户点击“登录”时显示登录组件并隐藏“注册”，当用户点击“注册”时显示注册组件并隐藏“登录”组件。

但如果我在登录时点击再次，它仍然会显示注册组件。

这是我的代码：

<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

【解决方案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';
}

【讨论】：

【解决方案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>

【讨论】：