如何检查ngIf是否生效

Question

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

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

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

我想知道的
所以我想知道的是，我怎样才能确定我的ngIf 已经生效并且元素是它们在要选择的 DOM 中的？
是否有 ngIf 的回调之类的东西或者可以我强制视图更新并从中获取回调？

我希望这是有道理的。这是漫长的一天（漫长的一周），我超级累。
谢谢大家

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

Answer 1

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

要解决您的问题，请在翻转布尔值后调用 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 - 使用渲染器调用focus
• https://stackoverflow.com/a/36338181/215945 - 使用指令设置焦点
• https://stackoverflow.com/a/34503163/215945 - 展示了 4 种不同的方法

Answer 2

这个问题比较老了，当时可能还没有当前的解决方案。

setTimeout() 方法完全可行，但有一个明显的缺点。如果你只是像我一样设置一个类来定位一个元素，你会得到一个跳跃的结果，因为代码是在角度循环之后执行的。

使用ChangeDetectorRef 会产生不跳转的结果。

所以不要这样：

class Foo {
  public isDisplayed = false;

  constructor(@Inject(ElementRef) private elementRef: ElementRef) {
  }

  public someMethod(): void {
     this.isDisplayed = true;
     setTimeout(() => {
         const child = this.elementRef.nativeElement.querySelector('.child-element');
         // ...
     });
  }
}

你可以这样做：

class Foo {
  public isDisplayed = false;

  constructor(@Inject(ElementRef) private elementRef: ElementRef,
              @Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) {
  }

  public someMethod(): void {
     this.isDisplayed = true;
     this.changeDetectorRef.detectChanges();
     const child = this.elementRef.nativeElement.querySelector('.child-element');
     // ...
  }
}