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

Posted 2021-04-09

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

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

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

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

答案

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

编辑：因为你希望子组件在运行时决定哪一个是要显示的组件，你不能让它们被*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();