子组件如何在子组件初始化时控制其自身在父组件中的可见性？

Question

父组件中有两个可互换的子组件，其可见性由父变量控制showList

<div id="parent">
   <app-child-1 *ngIf="showList"></app-child-1>
   <app-child-2 *ngIf="!showList"></app-child-2>
</div>

如何在子组件初始化时控制父变量"showList"？

我尝试用 Output 和 BehaviorSubject 来改变它，但这两个选项在初始化时都不起作用。

Answer 1

看起来showList是父组件的属性。这意味着父组件可以设置它的值。您希望子组件 "tell" 他们希望显示的父组件？如果是这样，您必须在子组件上声明一个事件并用您的父组件收听它。我猜测子组件上会有一个控件导致视图切换，所以基本上子组件请求隐藏不显示。

编辑： 由于您希望子组件在运行时间决定显示其中的哪一个，因此您不能隐藏它们通过 *ngIf 因为如果它们被隐藏，它们甚至不会被实例化，并且它们不能运行任何导致它们重新出现的代码。在这种情况下，您需要让它们全部存在，但使用 CSS.

隐藏在视图之外

子组件中的事件可以这样声明：

@Output() hideMe = new EventEmitter<any>();

父组件的监听是这样的：

<app-child-1 [class.hidden]="!showList" (hideMe)="showList=false"></app-child-1>
<app-child-2 [class.hidden]="showList" (hideMe)="showList=true"></app-child-2>

以及伴随的CSS：

.hidden { display: none; }

然后在你的子组件逻辑中，当你应该发出事件时：

this.hideMe.emit();

子组件如何在子组件初始化时控制其自身在父组件中的可见性？

How child component could control visibility of itself in the parent on child component initialization?

angular

output

angular6

behaviorsubject