为什么* ngIf和[hidden]在重新评估父级>子级属性绑定时工作方式不同

Question

我有一个组件，其中在模板中包含另一个组件，其输入绑定如下：

<div *ngIf="showComponent">
    <child-component
        [myInput]="someProperty"
        (onUpdate)="onUpdate($event)">
    </child-component>
</div>

如您所见，子组件位于另一个应用了*ngIf的元素中。

首次显示子组件时，someProperty的值会在子组件模板中使用的位置内很好地反映出来。

子模板中发生操作，该操作将更新父模板中someProperty的值。

可以切换子组件的可见性，当其隐藏并再次显示时，它不会反映父组件的最新更新值someProperty。

如果我将*ngIf更改为[hidden]，则效果很好。这是我应该在这里使用的正确方法吗？我只是担心引入反模式，所以以为我会向社区询问！

编辑

我了解ngIf和[hidden]之间在DOM中发生的区别。我只是不明白为什么在使用ngIf时，为什么子组件在显示/隐藏操作之间呈现，而子组件没有从其居住的父组件中获取someProperty的最新值。

谢谢

Answer 1

[hidden]使用CSS将其隐藏在页面上，但是使用* ngIf将其从DOM中删除，因此在显示时将其重新加载而不是使其可见。