Ionic 6/Angular中如何通过toggle按钮切换图表与表格视图

问题根因 #

现有两个共用同一数据源的展示组件：表格视图（app-tableview）、基于Chart.js实现的图表视图（canvas元素），需求是通过toggle开关实现两类视图互斥切换，同一时间仅展示一个视图。原有实现存在三个核心问题：

• 仅编写了表格视图的显隐逻辑，完全未控制图表视图的显隐状态，图表默认始终展示
• 表格显隐逻辑存在代码错误：需要隐藏表格的分支中，错误将表格的hidden属性设为false，导致表格始终处于显示状态
• 直接通过document.getElementById操作DOM不符合Angular/Ionic的开发规范，容易出现视图与状态不同步的问题
• 之前尝试visibility属性不生效的原因是：该属性仅让元素视觉上不可见，元素仍会占据页面布局空间，无法解决重叠问题。

修复实现 #

第一步：修改页面模板 #

放弃手动操作DOM的写法，使用Angular自带的属性绑定实现状态与视图联动，两个视图的显隐状态保持互斥：

<ion-header>
  <ion-toolbar class="toolbar-color">
    <ion-title>Views</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>Switch to table view</ion-label>
            <!-- 双向绑定开关状态 -->
            <ion-toggle [(ngModel)]="isTableShow"></ion-toggle>
          </ion-item>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <!-- 表格显示逻辑：开关选中时展示 -->
        <app-tableview [hidden]="!isTableShow"></app-tableview>
        <!-- 图表显示逻辑：开关未选中时展示，和表格状态完全相反 -->
        <canvas height="200" #lineCanvas [hidden]="isTableShow"></canvas>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

注意：使用[(ngModel)]双向绑定需要在当前页面对应的模块中导入FormsModule，否则绑定会报错。
如果不想引入FormsModule，可以改用toggle自带的ionChange事件获取状态，模板部分修改toggle代码为：

<ion-toggle (ionChange)="toggleView($event)"></ion-toggle>

第二步：修改组件逻辑代码 #

仅需要定义对应状态变量，不需要编写复杂的DOM操作逻辑：

// 默认不显示表格，即默认展示图表
isTableShow = false;

// 如果用ionChange事件的话加这个方法，用ngModel就不需要
toggleView(event: any) {
  this.isTableShow = event.detail.checked;
}

实现说明 #

• 该方案通过状态变量统一控制两个视图的显隐，逻辑上完全互斥，不会出现两个视图同时展示的问题
• 使用框架自带的属性绑定控制显隐，会自动跟随变更检测更新视图，不会出现状态和UI不同步的问题
• 用[hidden]绑定本质是给元素加display: none效果，元素隐藏时不会占据页面空间，彻底解决布局重叠问题
• 代码量远小于手动操作DOM的实现，后续维护更简单，也避免了手写属性赋值的低级代码错误

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