要素が角度2で定義されるのを待つ

Question

私はPrimeNG tabにGoogle Chartを埋め込むようにしています。私はAngular 2 Google Chart packageのフォークを使用しています。私がチャートで最初にページに移動すると、すべてが期待通りに機能します。私は離れて移動し、戻ったときしかし、私は次のエラーを取得する：

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

これは、彼らが存在していなかったのdivにチャートを描画しようとしていた場合は、1つはなるだろうと同じエラーです。私が知る限り、

1）グラフライブラリの取得中に遅延があり、<div id="my_chart"...>要素をレンダリングできるため、初めて動作します。 2）経路が再オープンされると、一連のイベントが発生し、divにDOMが含まれる前に、図表ライブラリがdivの内容を設定しようとします。

チャートコンポーネントは、PrimeNGタブに埋め込まれていないと正常に動作します。私は、イベントが発生する順序がこれによって壊れていると思われます。 PrimeNGのタブでコンテンツを<ng-content>に入れたというリファレンスが見つかりました。これがコンポーネントのライフサイクルで何らかの親子関係を壊した場合、 "my_chart" divが存在するまで@Inputをチャートコンポーネントに設定するのを待つ何らかの方法が必要と思われます。

私はさまざまなAngularライフサイクルフックのドキュメントを掘り下げましたが、この問題を解決できませんでした。どんな忠告も高く評価されます。

Answer 1

ことはあなたのルートを設定する際に解決属性を使用してみてください：

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

その後、あなたのコンポーネント内のデータというプル：

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

が次にあなたがリゾルバクラスを作成する必要があります。

@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部目ですが、リゾルバはレンダリングする前にすべてを手に入れる最良の方法です。