如何从父组件获得值?

Question

我有显示/隐藏内容(其他组件)的包装器组件app-content-show:

<app-content-show>
<div header_p>Block 1<div>
<div content_p>
<app-list-users></app-list-users>
<!-- Another component -->
<!-- Another component 2-->
<!-- Another component 3 -->
</div>
</app-content-show>

该组件包含局部变量public show = false;，控制何时显示内容投影content_p。

如何在子组件<app-list-users></app-list-users>中获得该变量?当它每次被改变时，怎么听?

Answer 1

我会选择*ngIf，就像这样

<app-content-show>
<div header_p>Block 1<div>
<div content_p>
<app-list-users *ngIf="show"></app-list-users>
<!-- Another component *ngIf="show" -->
<!-- Another component2 *ngIf="show" -->
<!-- Another component3 *ngIf="show" -->
</div>
</app-content-show>

我在现有的Stackblitz中做了一个快速的尝试，它似乎正在工作。请看这里(我把它添加到main-comp.component.ts)。像这样，你不需要改变你的孩子。你需要在每个地方添加*ngIf，但我认为这并不太糟糕。

Answer 2

您可以提供变量作为参数:

<app-content-show>
<div header_p>Block 1<div>
<div content_p>
<app-list-users [show]="show" />
</div>
</div>
</app-content-show>