Angular中切换下拉选项后共享图表组件无法重新渲染求助

问题原因 #

你的chartComponent仅在ngOnInit中初始化图表，而ngOnInit仅在组件首次创建时执行一次。当父组件切换下拉选项更新传入的chartData时，子组件未检测到数据变化，也未触发图表重新渲染逻辑。

解决方案 #

通过监听输入数据的变化，在数据更新时重新渲染图表，同时注意销毁旧图表实例避免内存泄漏。

方案1：使用Input Setter监听数据变化 #

修改chart.component.ts：

import { Component, Input, OnInit } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  private _chartData: any;
  private chart: any;

  @Input() set chartData(data: any) {
    this._chartData = data;
    this.renderChart();
  }

  get chartData(): any {
    return this._chartData;
  }

  ngOnInit(): void {
    this.renderChart();
  }

  private renderChart(): void {
    // 销毁旧图表实例
    if (this.chart) {
      this.chart.destroy();
    }

    // 初始化新图表
    this.chart = new Chart('myChart', {
      type: 'bar',
      data: this._chartData,
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

方案2：实现OnChanges接口监听数据变化 #

修改chart.component.ts：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit, OnChanges {
  @Input() chartData: any;
  private chart: any;

  ngOnInit(): void {
    this.renderChart();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 仅在chartData非首次变化时重新渲染
    if (changes.chartData && !changes.chartData.firstChange) {
      this.renderChart();
    }
  }

  private renderChart(): void {
    // 销毁旧图表实例
    if (this.chart) {
      this.chart.destroy();
    }

    // 初始化新图表
    this.chart = new Chart('myChart', {
      type: 'bar',
      data: this.chartData,
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

关键说明 #

• 每次数据更新前必须调用chart.destroy()销毁旧实例，否则会出现图表重叠、内存泄漏问题。
• 两种方案都能实现数据变化时的图表重新渲染，可根据个人习惯选择。

内容的提问来源于stack exchange，提问作者sravan ganji