Question

在inputVisibleIfThisIsTrue = true之后未定义输入元素，因为它位于ngIf内，我可以使用延迟，但是如果使用过渡和效果怎么办，我不想担心延迟多少时间设置为。

if (this.something) {
    this.inputVisibleIfThisIsTrue = true;
    this.input.nativeElement.focus(); // this.input is undefined because ngIf takes time
}

那么，this.input.nativeElement.focus()准备好了，我怎么只能使用ngIf？有观察者可以订阅的事件吗？

Answer 1

在视图完全初始化之后，可以使用Angular的AfterViewChecked生命周期挂钩执行功能。如果需要，请查看here，以了解钩子的文档，并查看here，以获取其他生命周期钩子。

Answer 2

从您对Korfoo答案的评论来看，我认为您正在做的是：

if (this.something) {
  this.inputVisibleIfThisIsTrue = true;
  if (this.input !== undefined) {
    this.input.nativeElement.focus();
  }
}

您可以通过以下操作进一步简化它：

if (this.something) {
  this.inputVisibleIfThisIsTrue = true;
  this.input && this.input.nativeElement.focus();
}

Answer 3

在条件更改后，我会直接使用setTimeout。

请参阅：https://stackblitz.com/edit/angular-epfwea

Answer 4

向其中添加模板变量：<your-component-name #var>

使用@ContentChild查询该变量：

@ContentChild('var', { read: ElementRef }) set _method(el: ElementRef) {
   // the component has been initializated, you can now access the variable el
}

此解决方案与AfterViewChecked之间的区别在于，该解决方案还适用于在运行时添加的动态注入的组件或元素，并且您确定仅当那个元素更改时，该方法才会执行

Angular-等待直到ngIf准备就绪，以避免其中的elementRef发生未定义的错误

4 个答案: