Angular中无法通过@Input为Highcharts设置图表标题的问题排查

问题原因 #

你在类属性声明阶段直接初始化chartOptions时，Angular还未完成@Input()属性的注入赋值，此时this.title取到的是声明时的初始空字符串""，该值会被直接固化到chartOptions.title.text中。后续@Input()拿到正确值后，你没有主动更新chartOptions里的标题配置，仅更新了series和触发重绘，所以标题不会自动同步最新值。

解决方法 #

场景1：标题仅需初始化时设置一次，后续不会变更 #

把chartOptions的初始化逻辑移到ngOnInit生命周期中执行，此时@Input()已经完成赋值，能拿到正确的title值：

export class StreamsComponent implements OnInit {
  @Input() platform: string = "";
  @Input() title: string = "";

  series: any[] = [];

  Highcharts: typeof Highcharts = Highcharts;
  updateFlag: boolean = false;
  // 先声明属性，暂不初始化
  chartOptions!: Highcharts.Options;

  ngOnInit(): void {
    // ngOnInit阶段@Input已完成赋值，此时初始化可拿到正确title
    this.chartOptions = {
      title: {
        text: this.title
      },
      chart: {
        zoomType: "x",
      },
      xAxis: {
        type: "datetime",
      },
      yAxis: {
        title: {
          text: "",
        },
      },
      legend: {
        enabled: false,
      },
      credits: {
        enabled: false,
      },
      series: this.series,
    };
    // 其余ngOnInit逻辑
  }
// 其余组件代码
}

场景2：标题可能会在组件运行过程中动态变更 #

每次更新series或者title发生变化时，主动更新chartOptions.title.text的值，再触发重绘即可：

// 服务回调中的逻辑示例
yourServiceRequest.subscribe(res => {
  // 赋值series数据
  this.series = res.seriesData;
  // 主动更新标题配置
  this.chartOptions.title = {
    ...this.chartOptions.title,
    text: this.title
  };
  // 触发图表重绘
  this.updateFlag = true;
})

内容的提问来源于stack exchange，提问作者A. Nurb