angular - 如何查看ngIf是否生效

Question

我在做什么
我有一个基于简单 bool 值使用 *ngIf 隐藏/显示的组件。当组件可见时，我想将焦点应用到其模板中的子元素。

问题
如果我翻转组件正确显示的 bool 值，但如果我随后尝试使用 this._elRef.nativeElement.querySelector("div#test") 获取对子元素的引用，它就会返回 空。如果我等待几秒钟，相同的代码将按我的预期返回对该元素的引用。

推测
我假设在翻转 Boolean angular 之后经过整个渲染周期以显示新可见的组件，并且当我在下一行应用 querySelector() 时这还没有完成。

我想知道的
所以我想知道的是，我如何确定我的 ngIf 已经生效并且元素在 DOM 中被选中？
是否有回调这样的东西对于 ngIf 还是我可以强制 View 更新并从中获取回调？

我希望这是有道理的。这是漫长的一天(漫长的一周)，我 super 累。
谢谢大家

如果有帮助，我正在使用 Angular2 v2.0.0-beta.15

Answer 1

如果您将 bool 值翻转为 true 并且在下一行代码中您尝试获取对由 NgIf 控制的组件或 DOM 元素的引用...好吧，那个组件或 DOM 元素还不存在。 Angular 不会与您的代码并行运行。您的 JavaScript 回调必须完成，然后 Angular(更改检测)运行，它会注意到 bool 值更改并创建组件或 DOM 元素并将其插入到 DOM 中。

要解决您的问题，请在翻转 bool 值后调用 setTimeout(callbackFn, 0)。这会将您的 callbackFn 添加到 JavaScript message queue .这将确保 Angular(更改检测)在您的回调函数之前运行。因此，当您的 callbackFn 执行时，您要关注的元素现在应该存在。使用 setTimeout(..., 0) 可确保您的 callbackFn 在 JavaScript event loop 的下一回合中被调用.

LifeCycle hooks 开发指南在讨论 AfterView* hooks 时使用了使用 setTimeout(..., 0) 的技术。 .

如果您需要更多详细信息，这里还有一些其他示例:

• https://stackoverflow.com/a/35752722/215945 - 使用焦点()
• https://stackoverflow.com/a/34757864/215945 - 使用 Renderer 调用 focus
• https://stackoverflow.com/a/36338181/215945 - 使用指令设置焦点
• https://stackoverflow.com/a/34503163/215945 - 展示了 4 种不同的方法