点击按钮后图表无法显示的Angular组件问题排查请求

你的问题核心原因是图表初始化时机不对：

• 当RatingComponent的ngOnInit执行时，flag初始值是false，*ngIf="flag"会把<canvas>元素从DOM中移除，这时候执行new Chart('myChart')根本找不到对应的DOM节点，图表实例创建失败。
• 当父组件通过EventEmitter把flag设为true时，<canvas>才被渲染到DOM，但此时ngOnInit已经执行过了，没有重新触发图表初始化的逻辑。

我们需要调整图表初始化的时机，确保只有当<canvas>元素存在于DOM中时，才创建Chart实例。具体步骤如下：

1. 抽离图表初始化逻辑到独立方法 #

把ngOnInit里的图表创建代码移到一个单独的方法中，方便后续重复调用：

// rating.component.ts
import { Rating } from './../../../../models/rating.model';
import { DataService } from 'src/app/services/data.service';
import { Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, ElementRef} from '@angular/core';
import {Chart} from '../../../../node_modules/chart.js';

@Component({
 selector: "app-rating",
 templateUrl: "./rating.component.html",
 styleUrls: ["./rating.component.css"]
})
export class RatingComponent implements OnInit ,OnChanges{
 rating: Rating[] = [];
 @Input() flag = false;
 @ViewChild('myChart') chartCanvas!: ElementRef<HTMLCanvasElement>; // 获取canvas元素
 private chartInstance: Chart | null = null; // 保存图表实例，避免重复创建

 constructor(private dataService: DataService) { }

 ngOnInit() {
   console.log('init');
 }

 // 抽离的图表初始化方法
 private initChart(): void {
   // 先判断canvas是否存在，且图表实例未创建
   if (!this.chartCanvas || this.chartInstance) return;

   this.chartInstance = new Chart(this.chartCanvas.nativeElement, {
     type: 'bar',
     data: {
       labels: ['Technical', 'Communication', 'Experience', 'Leadership'],
       datasets: [{
         label: 'skill scores',
         data: [10,15, 16, 22],
         backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)',
           'rgba(255, 206, 86, 0.2)',
           'rgba(75, 192, 192, 0.2)'
         ],
         borderColor: [
           'rgba(255, 99, 132, 1)',
           'rgba(54, 162, 235, 1)',
           'rgba(255, 206, 86, 1)',
           'rgba(75, 192, 192, 1)'
         ],
         borderWidth: 1
       }]
     },
     options: {
       scales: {
         yAxes: [{
           ticks: {
             beginAtZero: true
           }
         }]
       }
     }
   });
 }

 ngOnChanges(changes: SimpleChanges){
   console.log('flag changed:', changes['flag']);
   // 当flag变为true时，尝试初始化图表
   if (changes['flag'] && changes['flag'].currentValue === true) {
     // 因为*ngIf渲染DOM需要时间，所以用setTimeout确保canvas已存在
     setTimeout(() => this.initChart(), 0);
   }
   // 可选：当flag变为false时，销毁图表实例，释放资源
   if (changes['flag'] && changes['flag'].currentValue === false && this.chartInstance) {
     this.chartInstance.destroy();
     this.chartInstance = null;
   }
 }

 private getRatings($event){
   this.dataService.getRating().subscribe(res =>{
     this.rating.push(res);
   });
 }
}

2. 修改Rating组件的HTML模板 #

移除无用的chart-data等angular-chart属性，改用ViewChild绑定canvas元素：

<!-- rating.component.html -->
<div style="height:40%;width:40%" class="center" *ngIf="flag" >
  <canvas #myChart></canvas>
</div>

3. 优化父组件的EventEmitter逻辑 #

父组件DataComponent的toggle方法里，不需要传递null，直接传递布尔值即可，保持逻辑一致：

// data.component.ts
toggle() {
  this.visible = !this.visible;
  this.show.emit(this.visible); // 直接传递当前的visible状态，不用分情况
}

• 使用ViewChild获取canvas元素比通过id查找更符合Angular的组件化理念，避免全局id冲突。
• 在ngOnChanges中监听flag变化，并用setTimeout延迟执行初始化，是为了等待Angular完成DOM渲染，确保canvas元素已经存在于DOM中。
• 当flag变为false时销毁图表实例，可以避免内存泄漏，同时下次flag变为true时能重新创建干净的图表。

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