加载子组件之前的 Angular DOM 更新问题

Question

我正在尝试在加载子组件之前启动加载器（微调器）。我正在设置加载器 div 的可见性以在按钮的单击操作上显示块。并在子组件加载完成后尝试停止加载器，即在子组件的 ngAfterViewInit 中。

但是加载器永远不会被渲染。

它不仅仅是关于加载器，如果您在单击按钮时更新任何 DOM 端口，它不会在 UI 中更新。

我认为我的应用程序存在问题，因此从 angular.io 中获取了一个示例并使用所需的加载器对其进行了更新。它的行为仍然相同。

英雄之旅的游乐场在stackblitz进行测试。

我还发现了 ngAfterViewInit 的一个错误，但它在 NativeScript 存储库中，所以我希望 Angular 团队没有注意到它。

请告诉我在这种情况下更新 DOM 的正确方法是什么，或者如果这是 Angular 的问题，我会向他们提出。

在 stackblitz 操场上，我在 ngAfterViewInit 中放置了一个警报，以验证加载程序内容是否可见，实际上，如果我在本地运行该项目，firefox 会显示带有警报的加载程序，删除 alret firefox 后也无法显示加载程序.

代码流程： 仪表板是具有加载器 div 和单击事件以启动加载器的组件。 hero-detail 组件的 ngAfterViewInit 正在发出一个事件来停止加载器。

Answer 1

尝试使用“hidden”而不是 ngIF ([hidden]="heroDetail")。简而言之，ngIf 将从 DOM 中添加或删除元素，然后不会像您期望的那样跟踪 DOM 事件。 Hidden 将通过 CSS 隐藏或显示元素，保留其所有事件侦听器。

你可以阅读更多关于：

https://www.angularjswiki.com/angular/difference-between-ngif-and-hidden-or-displaynone-in-angular/