Question

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

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

这是我想要的序列：

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

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

出于某种原因，使用像ngAfterViewInit这样的生命周期钩子并没有帮助，这听起来应该足够了。工作的唯一生命周期钩子是ngAfterViewChecked，但是这会导致使用生成的实际控件（因为它在使用滑块时也会触发脚本）。

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

如何使用简单的jQuery脚本等待JSON调用来完成数据和要加载的DOM元素（ngFor）？

Answer 1

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

确实ngAfterViewInit似乎是正确的开始，但是还有更多内容，因为您正在谈论进行JSON调用。从http.get/post返回JSON时，您处于回调状态。异步操作完成后，该回调将触发，因此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")...
    }
}

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

1 个答案: