Angular 13中@Input()传数据给Highcharts图表不显示问题

我在Angular 13中使用Highcharts，想通过@Input()接收父组件传来的series数据和xAxis分类并赋值给图表，但图表无法正常显示数据。控制台能正常打印出数据和x轴分类，也尝试过在ngOnInit中定义chartOptions，问题依旧。

代码示例 #

HTML模板 #

<highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    [(update)]="updateFlag"
    style="width: 100%; height: 360px; display: block"
></highcharts-chart>

TypeScript代码 #

ngOnInit(): void {
    this.chartOptions.xAxis.categories = this.chartCategories;
    this.chartOptions.series[0].data = this.chartData
    console.log(this.chartOptions.xAxis.categories,
                this.chartOptions.series[0].data);
     this.updateFlag = true;
}

@Input()
public set options(options: {
    title: string;
    color: string;
    symbol: string;
    categories: string[];
    data: number[];
}) {
    this.chartCategories = options.categories;
    this.chartData = options.data;
    this.chartColor = options.color;
    this.chartTitle = options.title;
    this.symbol = options.symbol;
    this.updateFlag = true;
    // this.chartOptions.xAxis.categories = options.categories;
    // this.chartOptions.series[0].color = options.color;
    // this.chartOptions.series[0].name = options.symbol;
    // this.chartOptions.series[0].data = options.data;
}

Highcharts: typeof Highcharts = Highcharts;
updateFlag = false;

chartOptions: any = {
    chart: {
        type: 'bar',
    },
    title: {
        enabled: false,
        visible: false,
        text: '',
    },
    xAxis: {
        categories: [],
        title: {
            text: null,
        },
    },
    yAxis: {
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        visible: true,
    },
    tooltip: {
        enabled: false,
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: false,
            },
        },
    },
    credits: {
        enabled: false,
    },
   
    series: [
        {
            color: 'red',
            name: 'some text',
            data: [],
        },
    ],
};

问题原因及解决方法 #

核心问题 #

1. Angular变更检测无法识别chartOptions内部嵌套属性的修改（比如xAxis.categories、series[0].data的赋值），因为仅修改对象内部属性未改变chartOptions本身的引用。
2. ngOnInit执行时，@Input()的options可能还未完成赋值，导致chartCategories和chartData为空。

修复步骤 #

1. 用ngOnChanges监听输入变化

替换ngOnInit，在输入属性就绪后再更新图表配置，确保数据传入后再操作：

import { SimpleChanges, OnChanges } from '@angular/core';

// 实现OnChanges接口
export class YourComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['options'] && changes['options'].currentValue) {
      const opts = changes['options'].currentValue;
      // 直接更新嵌套属性
      this.chartOptions.xAxis.categories = opts.categories;
      this.chartOptions.series[0] = {
        ...this.chartOptions.series[0],
        color: opts.color,
        name: opts.symbol,
        data: opts.data
      };
      this.updateFlag = true;
    }
  }
}

2. 强制触发变更检测（可选）

如果修改嵌套属性后仍不生效，可通过创建新对象改变chartOptions引用，让Angular检测到变化：

// 在ngOnChanges或@Input setter中
this.chartOptions = {
    ...this.chartOptions,
    xAxis: {
        ...this.chartOptions.xAxis,
        categories: opts.categories
    },
    series: [
        {
            ...this.chartOptions.series[0],
            color: opts.color,
            name: opts.symbol,
            data: opts.data
        }
    ]
};
this.updateFlag = true;

3. 简化@Input逻辑

移除中间变量chartCategories、chartData，直接在输入变化时更新chartOptions，减少数据流转环节的问题。

完整修改后的TypeScript代码 #

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-highcharts-bar',
  templateUrl: './highcharts-bar.component.html',
  styleUrls: ['./highcharts-bar.component.css']
})
export class HighchartsBarComponent implements OnChanges {
  Highcharts: typeof Highcharts = Highcharts;
  updateFlag = false;

  chartOptions: any = {
    chart: { type: 'bar' },
    title: { enabled: false, visible: false, text: '' },
    xAxis: { categories: [], title: { text: null } },
    yAxis: { gridLineWidth: 0, minorGridLineWidth: 0, visible: true },
    tooltip: { enabled: false },
    plotOptions: { bar: { dataLabels: { enabled: false } } },
    credits: { enabled: false },
    series: [{ color: 'red', name: 'some text', data: [] }]
  };

  @Input() options!: {
    title: string;
    color: string;
    symbol: string;
    categories: string[];
    data: number[];
  };

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['options']?.currentValue) {
      const opts = changes['options'].currentValue;
      this.chartOptions.xAxis.categories = opts.categories;
      this.chartOptions.series[0] = {
        ...this.chartOptions.series[0],
        color: opts.color,
        name: opts.symbol,
        data: opts.data
      };
      this.updateFlag = true;
    }
  }
}

内容的提问来源于stack exchange，提问作者Beso Vepkhvadze