在Ionic/Angular中高效实现视图切换：利用ngIf指令管理组件显示

<ion-header>
  <ion-toolbar class="toolbar-color">
    <ion-title>视图切换</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col>
        <div class="ion-text-start">
          <ion-item>
            <ion-label>切换到表格视图</ion-label>
            <!-- 绑定到toggleView方法，当toggle状态改变时触发 -->
            <ion-toggle (ionChange)="toggleView($event)"></ion-toggle>
          </ion-item>
        </div>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <!-- 当showTableView为true时显示表格视图 -->
        <ng-container *ngIf="showTableView">
          <app-tableview></app-tableview>
        </ng-container>

        <!-- 当showTableView为false时显示图表视图 -->
        <ng-container *ngIf="!showTableView">
          <canvas height="200" #lineCanvas></canvas>
        </ng-container>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
// 假设你可能需要引入Chart.js
// import Chart from 'chart.js/auto';

@Component({
  selector: 'app-view-switcher',
  templateUrl: './view-switcher.component.html',
  styleUrls: ['./view-switcher.component.scss'],
})
export class ViewSwitcherComponent implements OnInit {

  // 默认显示图表视图，所以showTableView初始化为false
  showTableView: boolean = false; 

  // 如果需要，可以保留对canvas的引用，用于图表初始化
  @ViewChild('lineCanvas') private lineCanvas!: ElementRef;
  // private lineChart: any; // 如果使用Chart.js

  constructor() { }

  ngOnInit() {
    // 可以在这里初始化图表，如果默认显示的是图表
    // this.initChart();
  }

  // 切换视图的方法
  toggleView(event: any) {
    // ion-toggle的ionChange事件会传递一个包含checked属性的event对象
    this.showTableView = event.detail.checked;
    console.log('当前显示表格视图:', this.showTableView);

    // 如果需要在切换后重新渲染或更新图表，可以在这里处理
    // if (!this.showTableView) {
    //   this.initChart(); // 重新初始化图表
    // }
  }

  // initChart() {
  //   if (this.lineCanvas && this.lineCanvas.nativeElement) {
  //     // 销毁旧图表实例（如果存在）
  //     if (this.lineChart) {
  //       this.lineChart.destroy();
  //     }
  //     // 示例：初始化Chart.js图表
  //     this.lineChart = new Chart(this.lineCanvas.nativeElement, {
  //       type: 'line',
  //       data: {
  //         labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
  //         datasets: [{
  //           label: '示例数据',
  //           data: [65, 59, 80, 81, 56, 55, 40],
  //           fill: false,
  //           borderColor: 'rgb(75, 192, 192)',
  //           tension: 0.1
  //         }]
  //       },
  //       options: {
  //         responsive: true,
  //         maintainAspectRatio: false
  //       }
  //     });
  //   }
  // }
}

<ion-row>
  <ion-col>
    <!-- 当showTableView为true时显示表格视图，否则显示图表视图 -->
    <ng-container *ngIf="showTableView; else graphView">
      <app-tableview></app-tableview>
    </ng-container>

    <!-- 定义else块的模板引用 -->
    <ng-template #graphView>
      <canvas height="200" #lineCanvas></canvas>
    </ng-template>
  </ion-col>
</ion-row>