Подождите, пока элемент будет определен в Angular2

Question

Я пытаюсь встроить диаграмму Google в PrimeNG tab. Я использую вилку 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) он работает в первый раз, потому что есть задержка, когда библиотека диаграмм извлекается, что позволяет отображать элемент <div id="my_chart"...>. 2) при повторном открытии маршрута происходит последовательность событий, которые приводят к созданию библиотеки диаграмм, чтобы попытаться установить содержимое div до того, как div был включен в DOM.

Компоненты построения диаграмм отлично работают, когда они не встроены в вкладки PrimeNG. Я подозреваю, что порядок, в котором происходят события, был нарушен этим. Я нашел ссылку, в которой вкладки PrimeNG помещали контент в <ng-content>. Если это нарушает какие-то отношения родителя/ребенка в жизненном цикле компонентов, я также предполагаю, что мне нужно некоторое время ждать установки @Input компоненту диаграммы до тех пор, пока не будет существовать div «my_chart».

Я прорыл документацию по различным крючкам жизненного цикла, но не смог решить эту проблему. Любая авизиция будет оценена по достоинству.

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

Вам нужно будет импортировать все правильно, и я не знаю, есть ли у вас класс TypScript для данных, но что-то в этом направлении должно работать. Это должно сделать данные или что-то еще, что вам нужно, чтобы они были доступны до того, как будет обработан шаблон.

Надеюсь, что это поможет, он не полностью решает ваш вопрос, часть 2, но решатель - лучший способ получить все готовое, прежде чем вам понадобится визуализировать.