Angular 在页面中注入后，组件无法访问ViewChild

在爱奥尼亚3和Angular4的一个全新项目中，我有一个@组件，可以在画布中呈现如下内容：

analyzer chart.html:

<div>
  <canvas #chartCanvas></canvas>
</div>

@Component({
  selector: 'analyzer-chart',
  templateUrl: 'analyzer-chart.html'
})
export class AnalyzerChartComponent {

  @ViewChild('chartCanvas') chartCanvas;

后来

new Chart(this.chartCanvas.nativeElement

这个组件在@IonicPage（AnalyzerPage）中使用，效果非常好

但是现在我想从analyzer.ts中的AnalyzerChartComponent调用一个方法，因此我想将该组件注入页面的构造函数中，如下所示：

@IonicPage()
@Component({
  selector: 'page-analyzer',
  templateUrl: 'analyzer.html',
  providers: [AnalyzerChartComponent]
})
export class AnalyzerPage {

  pageTitle:string = "loading...";

  constructor(public navCtrl: NavController, public navParams: NavParams,
     public analyzerChart: AnalyzerChartComponent
    ) {
  }

然后，通过将组件注入页面，它停止工作，因为@ViewChild（'chartCanvas'）chartCanvas突然未定义。不知道为什么

html就像

<ion-content padding>

  <h1>{{ pageTitle }}</h1>
  <analyzer-selection-form></analyzer-selection-form>
  <br />
  <analyzer-chart></analyzer-chart>

</ion-content>

{{pageTitle}}

---

调用包含组件中的成员的正确方法是什么？

角度更新

@ViewChild（'chartCanvas'）chartCanvas当它运行更改检测时。在此之前，
chartCanvas
将是未定义的。创建所有视图后，角度运行将进行更改检测。它在创建视图时调用构造函数。所以你在这里尝试注入一个组件

  constructor(public navCtrl: NavController, public navParams: NavParams,
     public analyzerChart: AnalyzerChartComponent
    ) {

在对其进行角度变化检测之前。等待更改检测。使用
ngAfterViewInit
生命周期挂钩：

ngAfterViewInit() {
  this.analyzerChart.chartCanvas
}

阅读更多细节。
我完全错了。我应该使用标准的角度数据绑定，而不是尝试注入子组件（就像我在JSF等中所做的那样）：

 <analyzer-chart [analyzerResponse]="analyzerResponse"></analyzer-chart>

并响应子组件中的更改事件，如下所示：

private analyzerResponse:BacktestResult = xxx;

 @Input() 
  analyzerResponse:BacktestResult;

  ngOnChanges() {
    console.log('Hello AnalyzerChartComponent::ngOnChangeData');
    if (this.analyzerResponse && this.chartCanvas) {
      if (this.chart) {
        this.chart.destroy();
      }
      this.setupChart(600);
    }
  }

下次我在问之前完成我的手册阅读。谢谢马克西姆斯
 但是
analyzerChart
在构造函数中不是
未定义的吗？您正在尝试注入子组件吗？不，它在构造函数中不是未定义的-是的，我正在尝试注入子组件。那么，应该有帮助了。我已经尝试从页面组件analyzer.ts的ngAfterViewInit（）调用analyzerChart组件-不幸的是，chartCanvas仍然未定义。调用父级（页面）ngAfterViewInit（）时，是否也会调用子组件ngAfterViewInit（）？是的，已为所有子级调用了它，但chartCanvas仍然未定义-是否可以创建plunker，所以也许你没有清楚地说明情况