Question

当尝试将jQuery插件与Angular 2集成时，我们有三种情况：

1.ONLOAD：在页面加载时启动插件，这适用于以下代码：

ngAfterViewChecked(){
    ...
    $('#somedatatable1').DataTable()
    ...
}

2.ONCLICK：点击启动插件，通过检索服务器生成的html（我知道html不应该在json中传输，但只是数据，但这就是我所拥有的）并将其提供给页面，然后启动DataTable该数据的插件：

maincomponent.ts

clickDatatableParse(){
    this.http.get(this.jsonUrl)
        .map(res => res.json()) 
        .subscribe(
            data => { 
                this.data = data
            },
            err => console.log(err),
            () => console.log("fetched!")
        )
}

maincomponent.html

<div id="contents" [innerHTML]="data?.htmltable">

检索和解析数据后的PARSED Html输出

<div id="contents">
    <div id="somedatatable2">
        ....
    </div>
</div>

问题放置＆＃34; $（＆＃39; .somedatatable2＆＃39;）。datatables（）;＆＃34;所以它会正常工作。因此，需要完全检索和解析所有内容，然后在其上调用jQuery插件，然后它才能工作。

3.ONCLICK SUBCOMPONENT是我点击时，子组件被激活

maincomponent.ts

clickDatatableParse(){
    this.http.get(this.jsonUrl)
        .map(res => res.json()) 
        .subscribe(
            data => { 
                this.data = data
            },
            err => console.log(err),
            () => console.log("fetched!")
        )
}

maincomponent.html

<div id="subcomponent" [htmldata]="data?.htmltable">

subcomponent.html

<div id="subcomponentbody" [innerHTML]="htmldata">
    ....
</div>

检索和解析数据后的PARSED Html输出

<div id="subcomponentbody">
    <div id="somedatatable3">
        ....
    </div>
</div>

subcomponent.ts

ngAfterViewChecked(){
    ...
    $('#somedatatable3').DataTable()
    ...
}

问题是，如果这是应该有效的吗？我假设通过ngAfterViewChecked在子组件中启动插件更好的选择与否？

问题如何正确包含jQuery插件。我认为我应该通过＆＃34; import *导入插件作为来自＆quot; jquery-datatables＆＃39;＆＃34;的数据表和＆＃34; npm安装jquery-datatables --save＆＃34;在此之前，然后只需将插件的.css文件放入@component styleUrls：[＆＃39; datatables.css＆＃39;，＆＃39; main.css＆＃39;]。这是正确的方法吗？

Answer 1

我使用了ngAfterViewInit钩子，它就像一个魅力。当Angular操纵DOM时可能会出现问题。该问题的解决方法是每次Angular通过调用$("#sometable").DataTable()来操作DOM时刷新表

Answer 2

1.x Angle和Angle 2都不再有意义使用jQuery并且通过指令/组件可以执行必要的DOM修改：

“你不应该在AngularJS的顶部使用jQuery，因为如果我们使用JQuery进行任何角度DOM操作或范围变量操作，AngularJS摘要周期就不会运行”。

Angular 2的意义更小，因为一切都是组件。

我希望我能帮到你。

Angular2和jQuery插件完美协作？

2 个答案: