Question

我试图在PrimeNG tab中嵌入Google图表。我正在使用Angular 2 Google Chart package的分叉。我第一次使用图表路由到页面时，一切都按预期工作。但是，当我离开并返回时，我收到以下错误：

./MyChartComponent类MyChartComponent中的错误 - 内联模板：1：5导致：容器#my_chart未定义。

如果他们试图将图表绘制成不存在的div，则会出现同样的错误。据我所知，

1）它第一次工作，因为在检索图表库时存在延迟，允许呈现<div id="my_chart"...>元素。 2）当重新打开路径时，会触发一系列事件，导致图表库在div被包含在DOM之前尝试设置div的内容。

当图表组件未嵌入PrimeNG选项卡时，它们可以正常工作。我怀疑事件发生的顺序已被打破。我找到了一个引用，表示PrimeNG标签将内容放入<ng-content>。如果这在组件生命周期中打破了某种父/子关系，那么我进一步假设我需要某种方式等待将@Input设置为图表组件，直到＆＃34; my_chart＆＃34; div存在。

我已经挖掘了各种Angular生命周期钩子的文档，但是还没有能够解决这个问题。任何建议都将受到赞赏。

Answer 1

尝试在设置路线时使用resolve属性：

{
    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部分，但是解析器是在你需要渲染之前准备好所有东西的最好方法。

等待在Angular2

1 个答案: