1. 在每个子页面的组件构造函数中，导入Charts.js并创建一个全局变量，然后在ngOnInit()中使用它，确保每个页面都加载图表。例如：

import { Component } from '@angular/core'; import * as Chart from 'chart.js';

@Component({ selector: 'app-page1', templateUrl: './page1.component.html', styleUrls: ['./page1.component.css'] }) export class Page1Component {

chart: any = [];

constructor() { }

ngOnInit() { this.chart = new Chart('myChart', { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', data: [65, 59, 80, 81, 56, 55, 40], borderColor: '#3e95cd', fill: false }] }, options: { title: { display: true, text: 'Chart.js Line Chart - Custom Tooltip' } } }); }

}

2. 在根组件中，使用路由守卫在每个子页面的路由变化后重新加载图表。例如：

import { Component } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import * as Chart from 'chart.js';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {

constructor(private router: Router) { this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { setTimeout(() => { Chart.helpers.each(Chart.instances, (instance) => { instance.update(); }); }, 500); } }); }

}

3. 在每个子页面的HTML模板中，按照以下示例使用canvas元素创建图表。