javascript - jquery : access element inside an angular *ngIf directive

Question

我想使用隐藏在 *ngIf 指令中的 jquery 访问输入元素。举一个简单的例子:

...
export class ViewChannelScheduleComponent implements OnInit {

   someFunction() {
   ...
      doSomething($('#my-input'));
   ...
   }
}
...

<!-- and finally -->
<input id='my-input' />

事情运行得很好，直到我决定使用 *ngIf 隐藏组件。像这样的东西..

...    
export class ViewChannelScheduleComponent implements OnInit {

   isInputVisible = false;

   ngOnInit() {
      this.isInputVisible = true;
      doSomething($('#my-input')); //unable to catch element
   }

}
...

<!-- and finally -->
<button (click)="showInputBox()">Enable</button>
<input *ngIf="isInputVisible" class='date-time-picker' />

我发现在设置 isInputVisible 值后，jquery 无法立即获取该元素。我通过快速破解验证了这一点:

showInputBox() {
   this.isInputVisible = true;
   setTimeout(doSomething($('#my-input')), 100); //this works
}

有什么巧妙的方法让 jquery 等待元素可见并回调吗？

或者有什么方法可以直接在 Angular 中引用输入元素并将其转换为函数内的 jquery 对象吗？

Answer 1

让我们忽略您在 Angular 内部使用 jquery 并使用 ID 来引用元素的部分；)无论如何，在第二个代码示例中您正在使用 ngOnInit。在这个钩子(Hook)中，还没有可用的模板元素。为此，您必须转到 ngAfterViewInit Hook 。

但是您不能只更改该 Hook 内的 View 属性，这将给出表达式已更改警告。

如果您只想在 showInputBox 中使用它，您可以使用 ChangeDetectorRef:

constructor(readonly cd: ChangeDetectorRef) {}

showInputBox() {
   this.isInputVisible = true;
   this.cd.detectChanges();
   doSomething($('#my-input');
}

或者像您已经做的那样使用 setTimeout ，但没有 100ms:

showInputBox() {
   this.isInputVisible = true;
   setTimeout(() => doSomething($('#my-input'));
}

这确保它进入下一个更改检测循环