如何检查ngIf是否生效 [英] How to check whether ngIf has taken effect
问题描述
我在做什么
我有一个基于简单布尔值使用*ngIf隐藏/显示的组件.当组件可见时，我想将焦点放在其模板中的子元素上.
What I'm Doing
I have a component that hides/shows using *ngIf based on a simple Boolean. When the component becomes visible I want to apply focus to a child element within its template.
问题
如果我翻转布尔值，组件将正确显示，但是如果我尝试使用this._elRef.nativeElement.querySelector("div#test")获取对子元素的引用，它将返回null.如果我等待几秒钟，则相同的代码将按预期返回对该元素的引用.
The Problem
If I flip the Boolean value the component shows correctly but if I then try and get a reference to the child element using this._elRef.nativeElement.querySelector("div#test") it just comes back null. If I wait a few seconds the same code will return the reference to the element as I expected.
推测
我假设翻转布尔角后要经历整个渲染周期才能揭示新可见的组件，而到下一行应用querySelector()时，这还没有完成.
Speculation
I'm assuming that after flipping the Boolean angular goes through a whole rendering cycle to reveal the newly visible component and that this has not finished by the time I apply the querySelector() in the next line.
我想知道的事情
所以我想知道的是，如何确定我的ngIf生效并且元素是要选择的DOM中的元素?
是否存在诸如ngIf的回调之类的东西?我强迫视图更新并从中获取回调吗?
What I'd Like To Know
So what I'm wondering is, how can I be sure that my ngIf has taken effect and the elements are their in the DOM to be selected?
Is there such a thing as a callback for ngIf or can I force the view to update and get a callback from that?
我希望这是有道理的.这已经是漫长的一天(漫长的一周)，我非常累.
谢谢
I hope this makes sense. It has been a long day (long week) and I'm super tired.
Thanks all
如果有帮助，我正在使用Angular2 v2.0.0-beta.15
If it helps, I'm using Angular2 v2.0.0-beta.15
推荐答案
如果将布尔值翻转为true，并且在下一行代码中，您尝试获取对NgIf控制的组件或DOM元素的引用. ..很好，该组件或DOM元素尚不存在. Angular不会与您的代码并行运行.您的JavaScript回调必须完成，然后运行Angular(更改检测)，它将注意到布尔值的更改，并创建组件或DOM元素并将其插入DOM.
If you flip the boolean value to true and in the next line of code you try to get a reference to the component or DOM element controlled by NgIf... well, that component or DOM element doesn't exist yet. Angular doesn't run in parallel with your code. Your JavaScript callback has to finish, then Angular (change detection) runs, which will notice the boolean value change and create the component or DOM element and insert it into the DOM.
要解决您的问题，请在翻转布尔值后调用setTimeout(callbackFn, 0).这会将您的callbackFn添加到 JavaScript消息队列 .这将确保Angular(更改检测)在您的回调函数之前运行.因此，执行callbackFn时，现在应该存在要聚焦的元素.使用setTimeout(..., 0)确保callbackFn在下一个
To fix your issue, call setTimeout(callbackFn, 0) after you flip the boolean value. This adds your callbackFn to the JavaScript message queue. This will ensure that Angular (change detection) runs before your callback function. Hence, when your callbackFn executes, the element you want to focus should now exist. Using setTimeout(..., 0) ensures that your callbackFn gets called in the next turn of the JavaScript event loop.
Here are a few other examples, if you need more details:
- https://stackoverflow.com/a/35752722/215945 -使用focus()
- https://stackoverflow.com/a/34757864/215945 -使用渲染器调用
focus - https://stackoverflow.com/a/36338181/215945 -使用指令设置焦点
- https://stackoverflow.com/a/34503163/215945 -显示了4种不同的实现方法
- https://stackoverflow.com/a/35752722/215945 - uses focus()
- https://stackoverflow.com/a/34757864/215945 - uses Renderer to call
focus - https://stackoverflow.com/a/36338181/215945 - uses a directive to set the focus
- https://stackoverflow.com/a/34503163/215945 - shows 4 different ways to do it
这篇关于如何检查ngIf是否生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
