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”组件。

我该怎么做呢？

谢谢

- Eladerezador

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>

- Fateh Mohamed

---

是的，我之前尝试过，但什么也没发生，也许我需要将“isOn”作为参数从子组件传递到父组件，再从父组件传递到子组件。这四个组件都在“app-main”组件内，这将是父组件。 - Eladerezador

在条件满足后，这会触发ngcycle事件吗？ - Silent_Coder

通过这样做，我们必须将自己的导航循环连接到整个应用程序，默认的返回按钮将无法使用。整个应用程序遵循显示和隐藏组件的结构，这样做可以吗？ - Shahabaz

Answer 2

仅仅使用它

Typescript:

public show: boolean = false;
public buttonName: any = true;

toggle() {
    this.show = !this.show;
    if(this.show)
        this.buttonName = false;
    else
        this.buttonName = true;
}

HTML：

<div *ngIf="show">
<textarea #todoitem class="></textarea>
</div>
<button type="button" (click)="addItem('status')">Add</button>
<button type="button" (click)="toggle()">Close</button>
<div *ngIf="buttonName">
<a (click)="toggle()"><i class="fa fa-plus text-white"></i></a>
</div>

- Vadivel Subramanian

Answer 3

只需将变量设置为true和false

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

- Sachila Ranawaka