等待在Angular2中定義元素

我試圖在PrimeNG tab中嵌入Google圖表。我正在使用Angular 2 Google Chart package的分支。我第一次用圖表轉到頁面時，一切都按預期工作。然而，當我導航離開，並返回我收到以下錯誤：等待在Angular2中定義元素

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

這是相同的錯誤，如果他們試圖圖表繪製成根本不存在一個div一個會得到。據我所知，

1）它第一次工作，因爲檢索圖表庫時有延遲，允許呈現<div id="my_chart"...>元素。 2）當路徑重新打開時，一系列事件觸發，導致圖表庫嘗試並在div包含在DOM中之前設置div的內容。

圖表組件在PrimeNG選項卡中沒有嵌入時正常工作。我懷疑事件的發生順序已被打破。我發現PrimeNG標籤將內容放入<ng-content>。如果這打破了組件生命週期中某種父/子關係，那麼我進一步假設我需要一些方法來等待將@Input設置爲圖表組件，直到存在「my_chart」div爲止。

我已經挖掘了各種Angular生命週期鉤子的文檔，但一直未能解決這個問題。任何adivice將不勝感激。

來源

2016-11-14 Sevenless

嘗試設置您的路線使用的決心屬性：

{ 
    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部分，但解析器是在需要渲染之前準備好所有東西的最佳方式。

來源

2016-11-15 00:05:43 nfdavenport

等待在Angular2中定義元素

回答

相關問題