Angular 2 구성 요소 안에 부트 스트랩 테이블을 삽입 할 수 없습니다.

Question

ASP.NET 5로 Angular 2 웹 응용 프로그램을 개발 중입니다. 구성 요소 안에 테이블을 삽입하고 싶습니다. 이 라이브러리는 http://bootstrap-table.wenzhixin.net.cn/을 사용하여 테이블을 만듭니다. 테이블에 구성 요소가있는 경우 작동하지 않는 것으로 나타났습니다. 한편, index.html 파일에 있으면 작동합니다. 그 이유는 파일 bootstrap-table.css와 bootstrap-table.js에 대한 링크가 색인에 있지만 사실 index.html에는 루트 구성 요소 만 포함되어야하기 때문일 수 있습니다. 따라서 색인 구성 요소를 만들 수있는 방법을 찾아야합니다. 테이블은 구성 요소 내부에 있더라도 작동합니다. http://www.redexperu.com/assets/js/bootstrap-table-master/docs/examples.html을 : 그것은 여기에서 복사 된 때문에 코드가 정확해야

<table data-toggle="table" data-url="data1.json" data-height="299"> 
    <thead> 
     <tr> 
      <th data-field="id">Item ID</th> 
      <th data-field="name">Item Name</th> 
      <th data-field="price">Item Price</th> 
     </tr> 
    </thead> 
</table> 

:이 테이블의 코드입니다.

Answer 1

당신이 플러그인 (부트 스트랩-table.js)의 소스 코드를 읽는다면, 당신은 DOM의 모든 테이블에 이미 코드 부트 스트랩 다음, 정말 마지막에 그것을 발견 할 것이다 :

$(function() { 
    $('[data-toggle="table"]').bootstrapTable(); 
}) 

하는 경우를 당신은 angular1 (라우팅 포함) 또는 angular2 (구성 요소 포함)를 사용하고 있습니다. 아마도 angular2가 필요로 할 때까지 테이블은 DOM에 없을 것입니다.

당신이 할 수있는 것은 수동으로 ngAfterViewInit 방법에 bootstrapTable() 함수를 호출하는 것입니다 (https://angular.io/api/core/AfterViewInit#interface-overview)