Angular 8使用amCharts 4报html容器未找到如何解决

这个报错本质是amCharts初始化时找不到指定的DOM容器，结合你贴的代码，触发场景基本是以下两种：

• 你在chartRender()方法里写死了查找ID为chartdiv的容器，但子组件实际的容器ID是动态绑定的{{chartId}}，两者ID不匹配自然找不到元素。
• 就算你把传入amCharts的ID改成了this.chartId，Angular的插值绑定在ngAfterViewInit首次执行时，可能还没完成id属性的渲染更新；如果父组件的chartId是异步赋值（比如接口返回后才传值），ngAfterViewInit执行时chartId甚至可能还是undefined，这时候查找对应ID的元素必然失败。

按优先级推荐以下修复方式，优先选第一种，从根源避免ID匹配问题：

1. 用Angular模板引用变量直接获取DOM元素传入amCharts，完全绕开ID匹配逻辑，这是Angular项目集成第三方DOM库的通用最佳实践
   首先修改子组件模板，给图表容器加模板引用变量，不需要再动态绑定id：

   <div #chartContainer></div>
   

   然后修改子组件ts代码，通过ViewChild拿到容器原生元素，直接传给amCharts的create方法：

   import { Component, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
   import * as am4core from "@amcharts/amcharts4/core";
   import * as am4charts from "@amcharts/amcharts4/charts";
   
   @Component({
     selector: 'app-gender-age-range-chart',
     templateUrl: './gender-age-range-chart.component.html'
   })
   export class GenderAgeRangeChartComponent implements AfterViewInit, OnChanges, OnDestroy {
     @Input() chartId: string;
     @ViewChild('chartContainer') chartContainer: ElementRef<HTMLElement>;
     private chart: am4charts.PieChart;
   
     ngAfterViewInit(): void {
       this.tryRenderChart();
     }
   
     ngOnChanges(changes: SimpleChanges): void {
       // 父组件异步传chartId时，值更新后触发重渲染
       if (changes.chartId) {
         this.tryRenderChart();
       }
     }
   
     private tryRenderChart() {
       // 容器不存在或者chartId还没赋值时不执行渲染
       if (!this.chartContainer?.nativeElement || !this.chartId) return;
       // 已经渲染过的话先销毁旧实例，避免内存泄漏
       if (this.chart) {
         this.chart.dispose();
       }
       this.chartRender();
     }
   
     chartRender() {
       // 直接传入DOM元素，不需要做ID匹配
       this.chart = am4core.create(this.chartContainer.nativeElement, am4charts.PieChart);
       
       // 下方写你原有的饼图配置逻辑即可
       // const pieSeries = this.chart.series.push(new am4charts.PieSeries());
       // ...
     }
   
     ngOnDestroy(): void {
       // 组件销毁时清理图表实例，避免内存泄漏
       if (this.chart) {
         this.chart.dispose();
       }
     }
   }
   

2. 如果你一定要用ID查找的方式，首先要把chartRender里写死的chartdiv改成this.chartId，其次给初始化逻辑加延后执行逻辑，等DOM上的id属性渲染完成后再执行初始化，这种方式稳定性不如第一种，不推荐：

   ngAfterViewInit(): void {
     // 延后一个执行队列，等Angular完成插值绑定的属性更新
     setTimeout(() => {
       this.chartRender();
     }, 0);
   }
   
   chartRender() {
     // 注意这里不能写死"chartdiv"，要传动态的chartId
     const chart = am4core.create(this.chartId, am4charts.PieChart);
     // 其余配置
   }
   

注意：amCharts 4 实例不会随组件销毁自动清理，一定要在ngOnDestroy生命周期里调用实例的dispose()方法，否则会出现内存泄漏、控制台报错的问题。

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