Плагины Angular2 и jQuery прекрасно работают вместе?

Question

При попытке интегрировать JQuery плагинов с угловыми 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"> 

разобранного Html выход после того, как данные извлекаются и разобраны

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

Вопрос где ставить «$ (». Somedatatable2 «) .datatables();» поэтому он будет работать правильно. Итак, все нужно получить и полностью проанализировать, а затем вызвать плагин jQuery на нем, тогда он будет работать.

---

3.ONCLICK подкомпонент, когда я нажимаю, субкомпонент активируется

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> 

разобранного Html выход после того, как данные извлекаются и разобраны

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

subcomponent.ts

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

Вопрос если это то, что должно работать? Я предполагаю, что запуск плагина в подкомпоненте через ngAfterViewChecked лучший выбор или нет?

---

Вопрос, как правильно включить JQuery плагин. Я думаю, что я должен импортировать плагин через «импорт» как Datatables из «jquery-datatables» и «npm install jquery-datatables --save» до этого, а затем просто вставить .css-файл плагина в @component styleUrls: ['datatables.css', 'main.css']. Это правильный способ сделать это?

Answer 1

Оба 1.x Угол и угол 2 больше не имеют смысла использовать jQuery и могут выполняться через директивы/компоненты. Необходимы модификации DOM:

«Вы не должны использовать jQuery в верхней части AngularJS, потому что цикл digestJS не будет работать, если мы выполнять любую угловую манипуляцию с DOM или манипуляцию с изменяемой областью видимости с помощью JQuery ».

Угловой 2 имеет еще меньшее значение, поскольку все является компонентом.

Надеюсь, я помог.

Answer 2

Я использовал ngAfterViewInit крюк и работает как шарм. Проблема может возникнуть, когда Angular манипулирует DOM. Обходной путь к этой проблеме заключался бы в обновлении таблицы каждый раз, когда Угловой манипулирует DOM, вызывая $("#sometable").DataTable()