我在做什么
我有一个隐藏/显示的组件*ngIf基于简单的布尔值。当组件变得可见时，我想将焦点应用于其模板中的子元素。
问题
如果我翻转布尔值，组件会正确显示，但如果我尝试使用以下命令获取对子元素的引用this._elRef.nativeElement.querySelector("div#test")它刚刚回来null。如果我等待几秒钟，相同的代码将按照我的预期返回对元素的引用。
投机
我假设翻转布尔角度后会经历整个渲染周期以显示新可见的组件，并且当我应用querySelector()在下一行。
我想知道什么
所以我想知道的是，我怎样才能确定我的ngIf已经生效并且元素是在 DOM 中被选择的吗？
有没有回调之类的东西ngIf或者我可以强制视图更新并从中获取回调吗？
我希望这是有道理的。这是漫长的一天（漫长的一周），我非常累。
谢谢大家
如果有帮助，我正在使用 Angular2 v2.0.0-beta.15
如果将布尔值翻转为true在下一行代码中，您尝试获取对由 NgIf 控制的组件或 DOM 元素的引用...好吧，该组件或 DOM 元素还不存在。 Angular 不与您的代码并行运行。您的 JavaScript 回调必须完成，然后 Angular（更改检测）运行，它将注意到布尔值更改并创建组件或 DOM 元素并将其插入到 DOM 中。
要解决您的问题，请致电setTimeout(callbackFn, 0)翻转布尔值后。这会添加您的callbackFn to the JavaScript 消息队列 https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Queue。这将确保 Angular（更改检测）在回调函数之前运行。因此，当你的callbackFn执行后，您想要聚焦的元素现在应该存在。使用setTimeout(..., 0)确保您的callbackFn在下一个回合中被叫JavaScript 事件循环 https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Event_loop.
这种技术使用setTimeout(..., 0)在 LifeCycle hooks 开发指南中讨论时使用AfterView* 挂钩 https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview.
如果您需要更多详细信息，这里还有一些其他示例：
-
https://stackoverflow.com/a/35752722/215945 https://stackoverflow.com/a/35752722/215945- 使用焦点()
-
https://stackoverflow.com/a/34757864/215945 https://stackoverflow.com/a/34757864/215945- 使用Renderer来调用
focus
-
https://stackoverflow.com/a/36338181/215945 https://stackoverflow.com/a/36338181/215945- 使用指令来设置焦点
-
https://stackoverflow.com/a/34503163/215945 https://stackoverflow.com/a/34503163/215945- 展示了 4 种不同的方法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
