一旦 HTML 在 Angular 4 中完全动态呈现，如何在 jQuery 中调用函数？

Posted 2023-03-05

【中文标题】一旦 HTML 在 Angular 4 中完全动态呈现，如何在 jQuery 中调用函数？

【英文标题】：How can I call a function in jQuery once HTML is completely rendered dynamically in Angular 4?

【发布时间】：2018-06-12 01:10:59

【问题描述】：

我正在使用 Angular 4 作为我的 Web 模板。 一旦在构造函数中调用 HTTP get 方法，就会生成 html，其响应会创建 HTML。

以上工作正常。

我也在使用带有 Angular 的 jQuery 并尝试在此页面上初始化一个函数。

$(function() 
    Books.init();
);

我尝试在各种生命周期挂钩中调用上述代码。例如，ngOnInit()、ngOnChanges()、ngDoCheck、ngAfterViewInit()、ngAfterContentInit()，但在 API 响应完全呈现视图之前仍会调用代码。

有什么方法可以获取一个事件来确保视图完全呈现，然后我可以加载我的 jQuery？

请注意：我在 setTimeOut 调用中调用了这个函数，并有一小段时间延迟，这在其中起作用。

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案1】：

我遇到了同样的问题。 我没有找到任何解决方案，所以我使用了变量。

首先计算要渲染的元素的长度。

bookCount: number = 0;

然后在ngAfterContentChecked()中

ngAfterContentChecked() 
if(this.bookCount > 0 && this.bookCount == document.getElementsByClassName('bk-book').length)

  this.getInitdata();

这暂时对我有用，仍在寻找更好的解决方案。