Question

我正在尝试使用https://github.com/FERNman/angular-google-charts#advanced中提供的说明访问底层ChartWrapper，但由于出现“未定义图表”错误而无法使其工作

我尝试用其他Angular Lifecycle钩子ngAfterViewInit（）和ngAfterContentInit（）替换ngOnInit（），但结果仍然相同。

component.html

<google-chart #chart *ngIf="height"></google-chart>

component.ts

import { ViewChild } from '@angular/core';
import { GoogleChartComponent } from 'angular-google-charts'

@Component({
...
})
export class TimelineComponent implements OnInit {

  @ViewChild('chart', {static: true}) 
  chart: GoogleChartComponent

  ngOnInit() {
    this.someService.getHeight().subscribe((data: any) => {
      this.height = data
    })
  }

  ngAfterViewInit() {
    const wrapper = this.chart.wrapper
    console.log(wrapper)
  }
}

我希望看到可以在代码中使用的底层ChartWrapper。

Answer 1

在大多数情况下，您将需要在ViewChild中使用 {static：false} 。像这样进行设置可以确保找到依赖于绑定分辨率的查询匹配项（例如结构指令* ngIf等）。

答案是这样的：

  *@ViewChild('chart', {static: false})*

static：false 将成为Angular 9中的默认后备行为。

引入了{static：true}选项以支持动态创建嵌入式视图。当您动态创建视图并希望访问TemplateRef时，您将无法在ngAfterViewInit中执行此操作，因为这将导致ExpressionHasChangedAfterChecked错误。将static标志设置为true将在ngOnInit中创建视图。

@ViewChild无法在angular-google-charts中工作，错误为“未定义图表”

1 个答案: