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>

如果我点击按钮"联系"必须显示组件"app-contact-primary"和"app-contact-second"并隐藏"app-results"组件.

但是,如果我点击按钮"结果"必须隐藏组件"app-contact-primary"和"app-contact-second"并显示"app-results"组件.

我怎么能这样做？

谢谢

Answer 1

你可以使用hidden或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>