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是父组件的属性。这意味着父组件可以设置其值。您是否希望子组件“告诉”希望显示的父组件？如果是这样，则必须在子组件上声明一个事件，并与父组件一起监听。我猜想子组件上会有一个控件，该控件会导致视图切换，因此基本上子组件的请求被隐藏了。

编辑：由于您希望子组件在运行时决定要显示哪个组件，因此*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();

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

1 个答案: