Fatal编程技术网
  • javascript/
  • Javascript jquery:angular*ngIf指令中的access元素

Javascript jquery:angular*ngIf指令中的access元素

javascript jquery angular

Javascript jquery:angular*ngIf指令中的access元素,javascript,jquery,angular,Javascript,Jquery,Angular,我想使用隐藏在*ngIf指令中的jquery访问输入元素。举个简单的例子： ... export class ViewChannelScheduleComponent implements OnInit { someFunction() { ... doSomething($('#my-input')); ... } } ... <!-- and finally --> <input id='my-input' /> 有没有什么好

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

...
export class ViewChannelScheduleComponent implements OnInit {

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

<!-- and finally -->
<input id='my-input' />
有没有什么好办法让jquery等待元素可见并回调

或者直接在angular中引用输入元素并将其转换为函数中的jquery对象的任何方法？

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

但您不能仅仅更改该钩子内的视图属性，这将给出一个表达式已更改的警告

如果您只想在
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'));
}
这将确保它进入下一个更改检测循环（让我们忽略在angular内部使用jquery并使用ID引用元素的部分；）无论如何，在第二个代码示例中，您使用的是
ngOnInit
。在这个钩子中，还没有可用的模板元素。为此，您必须转到
ngAfterViewInit
hook

但您不能仅仅更改该钩子内的视图属性，这将给出一个表达式已更改的警告

如果您只想在
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'));
}
这确保它进入下一个变化检测循环

我不认为在angular应用程序中使用jQuery是个好主意，你可以用angular做大部分事情，就像用jQuery一样。如果您想引用元素，可以使用Angular提供的@ViewChild装饰器。
ngIf是一个指令，当您使用ngIf时，它将从DOM中添加和删除元素。因此，再次添加元素需要一些时间，这就是为什么它使用
settimeout（）。
如果只想隐藏元素，请使用
display:none
样式，如下所示：
[style.display]=“isInputVisible？”block'：“none”
而不是“*ngIf=“isInputVisible”在你的输入中，我不认为在angular应用程序中使用jQuery是一个好主意，你可以用angular做你可以用jQuery做的大部分事情。如果您想引用元素，可以使用Angular提供的@ViewChild装饰器。
ngIf是一个指令，当您使用ngIf时，它将从DOM中添加和删除元素。因此，再次添加元素需要一些时间，这就是为什么它使用
settimeout（）。
如果您只想隐藏元素，请使用
display:none
样式，如下所示：
[style.display]=“isInputVisible？”block'：“none”
，而不是输入中的“*ngIf=“isInputVisible”。虽然答案有效，我认为你应该在第一段中进一步发展，给他一个角度的解决方案，而不是JQuery@我尝试过trichetriche，但是
doSomething
需要一个
jQuery
对象，并且可能从那里加载一个库方法。我没什么可以重写的。。但是我同意你的观点，angular中没有jquery:）虽然答案是有效的，但我认为你应该在第一段中进一步发展，给他一个角度的解决方案，而不是jquery@我尝试过trichetriche，但是
doSomething
需要一个
jQuery
对象，并且可能从那里加载一个库方法。我没什么可以重写的。。但我同意你的看法，没有jquery：）