如何多次复用Angular饼图组件？解决多Widget渲染失效问题

嘿，这个问题我之前也碰到过，核心原因是你用了全局类选择器$('.Pie')来初始化Highcharts，当多个组件实例存在时，这个选择器会选中所有匹配的元素，但Highcharts的初始化逻辑没有绑定到当前组件的专属DOM上，导致只有第一个实例能正常渲染，后续实例会失效。

咱们一步步来修复这个问题：

1. 使用组件专属的DOM元素引用 #

在Angular组件的控制器中，可以注入$element服务，它指向当前组件的根DOM元素。通过它来定位组件内部的.Pie容器，确保每个组件只操作自己的DOM。

2. 选择正确的生命周期钩子初始化图表 #

直接在控制器函数里执行初始化，可能组件的DOM还没完全渲染完成。推荐使用$onInit钩子（Angular 1.5+），确保组件的绑定和DOM都已就绪。

3. 利用绑定的data属性实现动态数据 #

你已经定义了data双向绑定，但代码里没用到，把硬编码的图表数据替换成传入的data，让组件更灵活。

4. 清理组件销毁时的图表实例 #

为了避免内存泄漏，在组件销毁时调用Highcharts的destroy()方法清理实例。

修改后的chartPie组件代码 #

angular.module("generalApp").component("chartPie", {
    template: "<div class='Pie'></div>",
    bindings: { data: "=" },
    controller: function ($element) {
        let chartInstance;

        this.$onInit = function () {
            // 获取当前组件内的Pie容器，而非全局所有Pie元素
            const pieContainer = $element.find('.Pie')[0];
            
            // 用传入的data替换硬编码数据，如果data为空则用默认值
            const chartData = this.data || [
                ['Apples', 29.9, false],
                ['Pears', 71.5, false],
                ['Oranges', 106.4, false],
                ['Plums', 129.2, false],
                ['Bananas', 144.0, false],
                ['Peaches', 176.0, false],
                ['Prunes', 135.6, true, true],
                ['Avocados', 148.5, false]
            ];

            // 初始化Highcharts到当前组件的容器
            chartInstance = Highcharts.chart(pieContainer, {
                title: { text: 'Pie point CSS' },
                series: [{
                    type: 'pie',
                    allowPointSelect: true,
                    keys: ['name', 'y', 'selected', 'sliced'],
                    data: chartData,
                    showInLegend: true
                }]
            });
        };

        // 组件销毁时清理图表实例
        this.$onDestroy = function () {
            if (chartInstance) {
                chartInstance.destroy();
            }
        };
    }
});

修改index.html的组件调用 #

确保传入每个Widget对应的data（如果需要动态数据的话）：

<div ng-switch-when="Pie">
    <chart-pie data="widget.data"></chart-pie>
</div>

为什么原来的代码会失效？ #

当第一个chartPie组件初始化时，$('.Pie')会找到页面中第一个匹配的元素并初始化Highcharts；当第二个组件初始化时，$('.Pie')会选中所有.Pie元素，但Highcharts尝试在已经初始化过的元素上重复初始化会失败，或者覆盖之前的实例，导致只有第一个图表能正常显示。

用$element定位当前组件内的容器，每个组件实例都只会操作自己的DOM，完美解决复用问题。

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