如何在Angular 2中点击下拉菜单选项显示ng2-chart图表？

我想实现点击下拉菜单选项后，在页面中显示ng2-charts的图表。尝试通过innerHTML写入包含baseChart指令的canvas元素代码，但图表始终无法显示，推测是Angular没有正确解析这些属性和指令；但如果把这段HTML内容直接写在HTML模板文件里，图表就能正常显示。

我的动态写入innerHTML的代码：

document.getElementById("info").innerHTML = " <div style=\"display: block\">\n" + " <canvas baseChart\n" + " [datasets]=\"barChartData\"\n" + " [labels]=\"barChartLabels\"\n" + " [options]=\"barChartOptions\"\n" + " [chartType]=\"barChartType\"\n" + " [legend]=\"barChartLegend\"></canvas>\n" + "</div> some text <br>\n" + " some more text: <strong> "+ this.item + "</strong><br>\n" + "\n" + " some more text: <br>\n" + " Monday: <strong> " + this.percentMonday + "%</strong> <br>\n"

下拉菜单代码：

<div class="dropdown" dropdown [dropdownToggle]="false"> 
  <button class="btn btn-primary" dropdown-open>Kies een stad voor meer info</button> 
  <ul class="dropdown-menu"> 
    <li value="Amsterdam" (click)="goToAmsterdam()"><a>Amsterdam</a></li> 
  </ul> 
</div>

请问如何解决这个问题，实现点击后正确显示图表？

这是个典型的Angular动态内容处理坑——Angular根本不会解析通过innerHTML插入的HTML里的指令、绑定和组件。innerHTML只是把纯HTML字符串扔到DOM里，完全绕开了Angular的编译流程，所以baseChart指令、[datasets]这类属性绑定都不会被识别执行，图表自然显示不出来。

给你两个最实用的解决思路：

1. 用*ngIf切换预定义模板（最简单直接） #

既然是点击后显示内容，不如提前把图表和相关内容写在模板里，用布尔变量配合*ngIf控制显示/隐藏。这样所有内容都在Angular的编译范围内，指令和绑定都能正常工作。

操作步骤： #

1. 在组件HTML模板里添加预定义的内容块：

<div id="info" *ngIf="isAmsterdamActive">
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [chartType]="barChartType"
            [legend]="barChartLegend"></canvas>
  </div> 
  some text <br>
  some more text: <strong>{{ item }}</strong><br>
  some more text: <br>
  Monday: <strong>{{ percentMonday }}%</strong> <br>
</div>

2. 在组件类里添加控制变量，修改goToAmsterdam()方法：

isAmsterdamActive = false;

goToAmsterdam() {
  // 先给图表和文本赋值
  this.item = "Amsterdam";
  this.percentMonday = 75; // 示例数据，替换成你的真实数据
  this.barChartData = [/* 你的图表数据集 */];
  // 显示内容
  this.isAmsterdamActive = true;
}

这个方案是Angular最推荐的写法，代码简洁，没有额外复杂度，完全适配框架的运行逻辑。

2. 动态加载组件（适合复杂场景） #

如果你的需求更灵活（比如不同下拉选项对应不同的图表组件），可以用Angular的ComponentFactoryResolver和ViewContainerRef来动态创建组件实例。

操作步骤： #

1. 先创建一个独立的图表组件，比如CityChartComponent，把图表和相关内容封装进去：

// city-chart.component.ts
import { Component, Input } from '@angular/core';
import { ChartConfiguration, ChartType } from 'chart.js';

@Component({
  selector: 'app-city-chart',
  template: `
    <div style="display: block">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [chartType]="barChartType"
              [legend]="barChartLegend"></canvas>
    </div> 
    some text <br>
    some more text: <strong>{{ cityName }}</strong><br>
    some more text: <br>
    Monday: <strong>{{ mondayPercent }}%</strong> <br>
  `
})
export class CityChartComponent {
  @Input() cityName!: string;
  @Input() mondayPercent!: number;
  
  // 图表配置，根据需要调整
  public barChartOptions: ChartConfiguration['options'] = {
    responsive: true
  };
  public barChartLabels: string[] = ['周一', '周二', '周三'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartData: ChartConfiguration['data'] = {
    datasets: [
      { data: [this.mondayPercent, 65, 80], label: '百分比' }
    ]
  };
}

2. 在父组件的HTML里加一个容器，用来承载动态组件：

<div #chartHost></div>

3. 在父组件类里注入依赖，修改goToAmsterdam()方法：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { CityChartComponent } from './city-chart.component';

@Component({
  // 父组件的元数据配置
})
export class ParentComponent {
  @ViewChild('chartHost', { read: ViewContainerRef }) chartHost!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  goToAmsterdam() {
    // 先清空容器，避免重复添加
    this.chartHost.clear();
    // 创建组件工厂
    const factory = this.resolver.resolveComponentFactory(CityChartComponent);
    // 创建组件实例并挂载到容器
    const componentRef = this.chartHost.createComponent(factory);
    // 给组件传递输入数据
    componentRef.instance.cityName = "Amsterdam";
    componentRef.instance.mondayPercent = 75;
  }
}

4. 最后别忘了在模块的declarations和entryComponents（Angular 9+可省略）里注册CityChartComponent。

这个方案扩展性强，适合需要动态切换多种组件的场景。

再啰嗦下为什么innerHTML不行 #

Angular的编译是在构建时（JIT模式是运行时）完成的，它会把模板里的指令、绑定转换成对应的渲染逻辑。而innerHTML是运行时直接往DOM里插纯HTML，这部分内容根本没经过Angular的编译流程，所以baseChart指令不会被初始化，[datasets]这类绑定也不会关联到组件的数据，自然就出不来图表。

所以永远别想用innerHTML加载带Angular特性的内容，一定要用框架提供的正确方式处理动态内容。

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