Angular 4 - 显示和隐藏组件

Question

我在同一个 html 文件中有下一个组件。

<app-form></app-form>
<app-results [hidden]="isOn"></app-results>
<app-contact-primary [hidden]="!isOn"></<app-contact-primary>
<app-contact-second [hidden]="!isOn"></app-contact-second>

在组件“app-form”中，我有两个按钮:

<button pButton label="Contact" (click)="">Contact</button>
<button pButton label="Results" (click)="">Results</button>

如果我点击按钮“Contact”必须显示组件“app-contact-primary”和“app-contact-second”并隐藏“app-results”组件。

但是如果我点击按钮“Results”必须隐藏组件“app-contact-primary”和“app-contact-second”并显示“app-results”组件。

我该怎么做？

谢谢

Answer 1

您可以使用隐藏属性或 *ngIf 指令:

<app-form></app-form>
<app-results *ngIf="isOn"></app-results>
<app-contact-primary *ngIf="!isOn"></<app-contact-primary>
<app-contact-second *ngIf="!isOn"></app-contact-second>

<button pButton label="Contact" (click)="isOn= false">Contact</button>
<button pButton label="Results" (click)="isOn= true">Results</button>