jquery - Angular2 和 jQuery 插件完美地协同工作？

Question

当尝试将 jQuery 插件与 Angular 2 集成时，我们会遇到三种情况:

1.ONLOAD :在页面加载时启动插件，这与下面的代码配合得很好:

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

---

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

主要组件.ts

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

主要组件.html

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

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

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

问题是在哪里放置“$('.somedatatable2').datatables();”所以它会正常工作。所以，所有的东西都需要被完整地检索和解析，然后调用它的 jQuery 插件，然后它就可以工作了。

---

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

主要组件.ts

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

主要组件.html

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

子组件.html

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

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

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

子组件.ts

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

问题是这是否可行？我假设通过 ngAfterViewChecked 在子组件中启动插件是更好的选择吗？

---

问题是如何正确地包含 jQuery 插件。我认为我应该在此之前通过“import * as Datatables from 'jquery-datatables'”和“npm install jquery-datatables --save”导入插件，然后将插件的 .css 文件放入@component styleUrls: ['datatables.css','main.css'].这是正确的做法吗？

Answer 1

我使用了 ngAfterViewInit 钩子(Hook)，它的效果非常好。 Angular 在操作 DOM 时可能会出现问题。该问题的解决方法是每次 Angular 通过调用 $("#sometable").DataTable()

操作 DOM 时刷新表格