Angular2에서 jQuery 플러그인을 사용하는 방법은 무엇입니까? 플러그인은 이전에 DOM 업데이트가 실행됩니다.

Question

제 목표는 angular2에 jQuery 플러그인을 적용하는 것입니다. jQuery.DataTable, bootstrap-select 등의 플러그인 일 수 있습니다.

서비스에서 데이터를 가져 오는 중입니다. 서비스가 아약스를 요청합니다. ngFor 바인딩을 사용하여 선택 또는 테이블에 데이터를 바인딩 한 다음 jQuery 플러그인 함수 (정의 파일 사용)를 호출하여 적절한 플러그인을 렌더링합니다.

여기의 문제는 시간차입니다. 첫 번째 단계에서는 데이터 바인딩, 두 번째 단계에서는 플러그인을 적용하지만 바인딩이 조금 느려서 실제 바인딩 HTML 렌더링 전에 플러그인의 코드가 실행된다고 생각합니다. 이것은 나에게 문제를 일으키고있다.

샘플 코드는 다음과 같습니다 :

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

제안하십시오.

Answer 1

또한 지시어를 사용할 수 있습니다

/** 
* [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(); 
    } 
} 

희망이 당신을 도울 것입니다.