javascript – Angular 2在渲染元素后调用jQuery – 在使用API​​之后

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Angular 2在渲染元素后调用jQuery – 在使用API​​之后，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1028字，纯文字阅读大概需要2分钟。

内容图文

我的Angular2应用程序使用RESTful API,然后创建一堆< select>基于结果的元素.我试图在这些< select>上调用jQuery函数元素,但看起来jQuery函数执行得太迟了.我尝试将该函数放在ngAfterContentInit中,但这不起作用.把它放在ngAfterViewChecked中冻结了我的浏览器.

页面渲染后,如果我将jQuery函数粘贴到控制台中,一切正常,所以我知道我的函数和一切都是有用的.他们的订单可能搞砸了或其他什么.

在我的组件中：

ngOnInit() {
  this.myService.getAll().subscribe(
           data => this._data = data,
           error => this._error = "invalid.");
}

ngAfterViewInit() {
  $("select").select2(); // <--- jQuery function I need to execute after rendering
}

在我的模板中：

<select *ngFor="let d of _data">...blah blah</select>

解决方法:

这应该适合你：

@ViewChild('select') selectRef: ElementRef;
constructor(private myService: MyService, private ngZone: NgZone) {}

ngOnInit() {
  this.myService.getAll().subscribe(data => {
    this.options = data;
    // waiting until select options are rendered
    this.ngZone.onMicrotaskEmpty.first().subscribe(() => {
      $(this.selectRef.nativeElement).select2(); 
    });
  });
}

Plunker Example

内容总结

以上是互联网集市为您收集整理的javascript – Angular 2在渲染元素后调用jQuery – 在使用API​​之后全部内容，希望文章能够帮你解决javascript – Angular 2在渲染元素后调用jQuery – 在使用API​​之后所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端