Angular父类@ViewChild引用图表，子类如何复用无需重复声明？

没问题，这是Angular组件继承里很常见的需求，我们可以通过正确的继承策略让子类直接复用父类声明的@ViewChild变量，完全不用在每个子类里重复写。下面是具体的实现步骤和代码示例：

核心要点 #

• 父类中声明的chart属性必须是public或protected（你已经用了public，这点完全没问题），这样子类才能访问到这个实例。
• 子类的模板中必须包含BaseChartDirective对应的<base-chart>标签（ng2-charts的核心指令），因为@ViewChild是基于当前组件的DOM模板来查询实例的——如果父类模板没有这个标签，子类模板必须补上，否则chart会是undefined。

完整父类代码（补全你未写完的部分） #

import { Component, ViewChild, OnInit } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
import { LabelOptions } from '../labelOptions';

@Component({
  selector: "app-graph",
  templateUrl: './graph.component.html', // 可选：如果父类有通用模板，可以在这里定义
  styleUrls: ["./graph.component.css"]
})
export class GraphComponent implements OnInit {
  @ViewChild(BaseChartDirective) public chart: BaseChartDirective | undefined;

  // 父类可以封装通用的图表操作方法，子类直接调用
  protected refreshChart(): void {
    if (this.chart) {
      this.chart.refresh();
      console.log('图表已刷新');
    }
  }

  ngOnInit(): void {
    // 父类的初始化逻辑
  }
}

子类实现示例 #

子类只需要继承父类，不需要重复声明@ViewChild，直接通过this.chart访问实例即可：

import { Component, AfterViewInit } from '@angular/core';
import { GraphComponent } from './graph.component';

@Component({
  selector: "app-line-graph",
  templateUrl: './line-graph.component.html', // 子类模板必须包含<base-chart>
  styleUrls: ['./line-graph.component.css']
})
export class LineGraphComponent extends GraphComponent implements AfterViewInit {
  // 不需要再次声明@ViewChild(BaseChartDirective)！

  // 子类自定义的方法，直接使用父类的chart实例
  public updateLineChartData(newData: any[]): void {
    // 假设这里更新了图表数据
    // ...

    // 调用父类封装的通用方法刷新图表
    this.refreshChart();

    // 也可以直接操作chart实例
    if (this.chart) {
      console.log('当前图表类型：', this.chart.chartType);
    }
  }

  ngAfterViewInit(): void {
    // 务必在视图初始化完成后访问chart实例，此时@ViewChild已经赋值
    super.ngAfterViewInit(); // 如果父类实现了这个钩子，记得调用父类方法

    if (this.chart) {
      // 在这里做初始化图表的操作
      console.log('子类中获取到的图表实例：', this.chart);
    }
  }
}

子类模板示例（line-graph.component.html） #

确保模板里包含ng2-charts的<base-chart>指令，这样父类的@ViewChild才能查询到实例：

<!-- ng2-charts的基础图表组件 -->
<base-chart
  [datasets]="lineChartDatasets"
  [labels]="lineChartLabels"
  [chartType]="'line'"
  [options]="lineChartOptions"
></base-chart>

额外注意事项 #

• 如果父类的模板已经包含了<base-chart>，子类可以通过设置templateUrl为父类模板来复用，或者在子类模板中继承父类的内容（比如用<ng-content>）。
• 永远不要在ngOnInit中直接访问this.chart，因为此时视图还未初始化，@ViewChild的实例还没被赋值——一定要在ngAfterViewInit或之后的生命周期钩子中操作。

内容的提问来源于stack exchange，提问作者Sergio Barbero