angular - Kuinka käyttää jQuery-laajennusta Angular2:ssa? Laajennus suoritetaan ennen kuin DOM päivittyy

Tavoitteeni on käyttää jQuery-laajennusta Angular2:ssa. Se voi olla mikä tahansa laajennus, kuten jQuery.DataTable, bootstrap-select tai muu vastaava.

Mitä minä teen, on hakemassa tietoja palvelusta. Palvelu tekee ajax-pyynnön. Sidon tiedot select- tai taulukkoelementtiin käyttämällä ngFor-sidontaa, ja sitten kutsun jQuery-liitännäisen toimintoa (käyttämällä määrittelytiedostoja) renderöidäkseni asianmukaisen liitännäisen.

Ongelma täällä on aikavyöhykkeiden ero. Ensimmäisessä vaiheessa sidon tiedot, toisessa vaiheessa käytän liitännäistä, mutta mielestäni sitominen on hieman hidasta, joten liitännäisen koodi suoritetaan ennen kuin varsinaisen sitomisen HTML-renderöinti tapahtuu. Tämä aiheuttaa minulle ongelmia.

Esimerkkikoodi on alla:

private loadPermissionGroups() {
        this.permissionManagerService.getPageData()
            .subscribe(res => {
                this.employeeList = res.Data.PageData.EmployeeList;
                // applyDataTable jQuery code
            },
            null,
            () => {
                this.showLoading = false;
            });
    };

Ole hyvä ja ehdota.

Vastaus #1

Voit käyttää direktiiviä myös:

/**
 * [Directive description]
 * @param {"[custom-dropdown]"}} {  selector [Directive for adding jQuery for select box]
 */

@Directive({
   selector: "[custom-dropdown]"
})


/**
 *[Class description]
 */
export class customDropdown implements AfterViewInit {
  constructor(public el: ElementRef) {}

  ngAfterViewInit() {
    $(this.el.nativeElement).selectpicker();
  }
}

Toivottavasti tämä auttaa sinua.