요소가 각도 2로 정의 될 때까지 기다립니다.

Question

PrimeNG tab에 Google 차트를 삽입하려고합니다. Angular 2 Google Chart package 포크를 사용하고 있습니다. 처음으로 차트가있는 페이지로 이동하면 모든 것이 예상대로 작동합니다.

Error in ./MyChartComponent class MyChartComponent - inline template:1:5 caused by: The container #my_chart is not defined.

이 그들이 존재하지 않았다 사업부로 차트를 그리려고한다면 하나가 얻을 것과 같은 오류입니다 : 내가 멀리 탐색 할 때, 나는 다음과 같은 오류가 반환합니다. 그림에서 알 수 있듯이

1) 차트 라이브러리를 검색하는 동안 지연이 발생하여 <div id="my_chart"...> 요소를 렌더링 할 수 있으므로 처음으로 작동합니다. 2) 경로를 다시 열면 div에 DOM이 포함되기 전에 차트 라이브러리에서 div의 내용을 설정하도록하는 일련의 이벤트가 발생합니다.

차트 구성 요소가 PrimeNG 탭에 포함되어 있지 않은 경우 제대로 작동합니다. 나는 사건이 일어난 순서가 이것에 의해 망가 졌다고 의심한다. 나는 PrimeNG 탭이 콘텐츠를 <ng-content>에 넣었다고 언급했다. 이것으로 구성 요소 수명주기에서 일종의 부모/자식 관계가 깨지면 "my_chart"div가 존재할 때까지 @Input을 차트 구성 요소로 설정하는 것을 기다리는 방법이 필요하다고 가정합니다.

다양한 앵글 라이프 사이클 후크에 대한 문서를 파헤 치지만이 문제를 해결할 수는 없습니다. 모든 adivice 감사하겠습니다.

:

ngOnInit() { 
    //The 'data' gets loaded into the snapshot by the route resolver 
    this.chartData = this.route.snapshot.data['chartData']; 
    } 

그런 다음 당신은 확인자 클래스를 만들 수 있습니다

{ 
    path: '', 
    resolve: { chartData: ChartResolver }, 
    component: MyChartComponent 
} 

그런 다음 구성 요소에 데이터가 있음을 당겨 :

Answer 1

는 경로를 설정하는 결의 속성을 사용하십시오

@Injectable() 
export class ChartResolver implements Resolve<ChartData> { 

    constructor(private http:Http) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ChartData> { 

    //Doesn't have to be a server call, as long as it returns the data 
    return this.http.get("/url-to-chart-info) 
     .map((res:Response) => res.json()); 
    } 
} 

올바르게 모든 것을 가져와야 할 것이며, 당신이 Typescript 클래스를 가지고 있는지 잘 모르겠다. 데이터,하지만이 방향으로 뭔가 작동합니다. 이렇게하면 템플릿이 렌더링되기 전에 준비해야 할 데이터 나 기타 데이터를 만들어야합니다.

도움이 되었으면 좋겠지 만, 질문 2, 그 이상을 충분히 처리하지는 못했지만 해결사는 렌더링해야하기 전에 모든 것을 준비하는 가장 좋은 방법입니다.