首页 文章

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

提问于
浏览 次
0

请注意，我是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 ）的加载？

jquery html json angular sequence

1 回答

  • 2

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

    事实上 ngAfterViewInit 似乎是一个正确的起点，但是's more to it, since you'正在谈论进行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")...
    }
}
    回复于

相关问题