如何使jQuery在Angular 2中以正确的顺序运行

Question

请注意，我是Angular 2和异步加载的初学者。 以下问题有助于我走上正轨，但似乎无法回答这个确切的问题：

• 如何在Angular2中使用jQuery？
• 每个组件完成加载后如何在Angular 2中运行jquery函数
• 如何在Angular 2中将jQuery与JavaScript结合使用

我有一个应在Angular 2项目中运行的jQuery脚本，但似乎找不到正确的方法来使这些脚本按正确的顺序加载。 该脚本找到一个特定的DOM元素，并将其变成一个自定义的径向滑块（使用http://roundsliderui.com ）。

这是我想要的顺序：

1. JSON调用以获取数据
2. ***。component.html中充满了<li *ngFor="let item of items" ...</li>
3. roundSlider脚本加载li元素并将其转换为roundSliders（径向滑块控件）

似乎正在发生的事情是，处理JSON调用的Angular2组件总是在显示用于加载数据的控件的jQuery脚本之后加载（或完成）。 这意味着jQuery脚本已成功加载，但没有DOM元素可供参考。

由于某些原因，使用诸如ngAfterViewInit类的Lifecycle挂钩ngAfterViewInit ，这听起来就足够了。 唯一的生命周期挂钩， 做的工作是ngAfterViewChecked，但这会导致麻烦，使用所产生的实际控制（因为它，当您使用滑块，然后又触发脚本）。

我认为尝试使用ngOnInit挂钩按顺序调用脚本会很聪明，但这也不起作用。

一个简单的jQuery脚本如何才能难以等待JSON调用完成数据获取和DOM元素（ ngFor ）的加载？

Answer 1

如果没有显示一些代码，我想这是关于如何使用Observables的常见问题。

确实， ngAfterViewInit似乎是一个合适的起点，但是还有更多的东西，因为您正在谈论进行JSON调用。 当JSON从http.get/post返回时，您正在回调中。 每当异步操作完成时都会触发该回调，因此该http调用之后的所有内容都可能在调用完成之前执行。

我建议按照以下示例将您的JQuery调用放入该订阅回调中：

this.http.get("url")
    .map(res => res.json())
    .subscribe(data => {
        this.data = data;
        $("selector")....
    });

---

编辑：

再次考虑，该视图可能尚未呈现您的数据。 因此，也许您仍然可以使用ngAfterViewChecked并检查data变量是否已填充，并且布尔变量是否保持initialized状态，以便仅在加载数据后执行一次。

ngAfterViewInit() {
    if (this.data != null && !this.initialized) {
        this.initialized = true;
        $("selector")...
    }
}