angularjs - 等待 Angular2 中定义元素

Question

我正在尝试将 Google 图表嵌入到 PrimeNG tab 中。我正在使用 Angular 2 Google Chart package 的 fork 。我第一次路由到带有图表的页面时，一切都按预期进行。但是，当我离开并返回时，出现以下错误:

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 生命周期 Hook 的文档，但未能解决这个问题。任何建议将不胜感激。

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'];
  }

然后您必须创建 Resolver 类:

@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 部分)，但解析器是在需要渲染之前准备好一切的最佳方式。