等待在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中定义元素

回答

相关问题