更改子组件属性中的 @Input() 会阻止父组件的进一步更新

Question

我有 2 个组件 - 父组件和子组件。请参阅stackblitz 演示 父级模板如下所示 -

单击“显示子组件”时，isChild1Visible 设置为 true，导致子组件显示其模板。

当您单击“隐藏我”时，子组件将 isVisible 设置为 false，从而使其被隐藏。现在，当再次单击“显示子组件”时，子组件将不会显示。

我在子组件中添加 ngOnChanges() 以查看更改检测，但是在初始化子组件时我看到以下内容：

第一次点击“显示”后

单击“隐藏我”后，即使稍后单击“显示我”，ngOnChanges()也不会打印任何内容。

那么，为什么在子组件中更新输入属性后更改检测停止工作？

Answer 1

问题

第一次设置时isChild1Visible，使用单向绑定也会将子项设置isVisible为 true。

从内部，您设置isVisible为 false，因此 div 会像您一样消失*ngIf="isVisible"。

然而，外在isVisible依然true！

当您再次点击外部按钮时，不会检测到任何更改，因为值保持不变，因此不会将任何内容传递给子级。

请参阅此stackblitz 演示，其中公开了两个布尔值。

选项 1：明确监听输出

如果您想从外部控制组件，则应该将逻辑保留在外部。

@Output一种可能的方法是在您的孩子上添加一个EventEmitter当您想要关闭孩子时发出的 。

父级将监听该事件并执行某些操作，例如设置isVisible为 false。

您可以在更新的 stackblitz上看到它。

选项 2：双向绑定

与解决方案选项 1 类似，您可以创建一个发射器，以与输入相同的名称进行调用，以结尾Change并触发您的更改。

在这种情况下，您只需将绑定替换为[(isVisible)]="isChild1Visible"并添加isVisibleChange为@Output EventEmitter<any>。

stackblitz上的演示。