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。在此挂钩中，没有可用的模板元素。为此，您必须转到ngAfterViewInit钩子。

但是您不能只更改该挂钩中的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'));
}

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

jQuery：角* ngIf指令内的访问元素

1 个答案: