Ionic/Angular 视图切换最佳实践：利用 *ngIf 实现高效动态展示

视图切换的常见挑战与误区

在构建具有多种数据展示模式（例如，图表视图和表格视图）的 Ionic/Angular 应用时，用户通常希望通过一个交互元素（如切换按钮）来动态切换这些视图。一个常见的初始尝试是使用 HTML 的 hidden 属性结合 JavaScript 进行 DOM 操作，如下所示：

<ion-item>
  <ion-label>切换到表格视图</ion-label>
  <ion-toggle (click)="showTable()"></ion-toggle>
</ion-item>

<!-- 视图区域 -->
<app-tableview hidden="true" id="tableview"></app-tableview>
<canvas height="200" #lineCanvas></canvas>

以及对应的 TypeScript 逻辑：

showTable() {
  if (this.tableHidden === true) {
    this.tableHidden = false;
    document.getElementById("tableview").hidden = false;
  } else if (this.tableHidden === false) {
    this.tableHidden = true;
    document.getElementById("tableview").hidden = false; // 这里的逻辑存在问题，无论如何都显示表格
  }
}

这种方法存在以下几个问题：

1. 直接 DOM 操作： 在 Angular 应用中，直接使用 document.getElementById 来操作 DOM 元素通常不是最佳实践。Angular 提供了更声明式、更高效的方式来管理视图。
2. hidden 属性的局限性： hidden 属性仅仅通过 CSS display: none; 来隐藏元素，但元素本身仍然存在于 DOM 树中。这意味着即使视图被“隐藏”，它可能仍然会占用内存、执行生命周期钩子，甚至在某些情况下影响性能。
3. 逻辑错误： 在上述示例中，showTable() 方法的两个分支都将 document.getElementById("tableview").hidden 设置为 false，导致表格视图始终显示，无法正确切换。此外，它也没有处理图表视图的隐藏。
4. 维护性差： 随着应用复杂度的增加，直接 DOM 操作的代码将变得难以维护和调试。

Angular 解决方案：利用 *ngIf 进行条件渲染

Angular 提供了结构化指令（Structural Directives）来改变 DOM 的结构，其中 *ngIf 是实现条件渲染最常用的指令。与 [hidden] 属性不同，*ngIf 会根据条件添加或移除 DOM 元素，而不是简单地隐藏它们。这意味着当条件为 false 时，元素及其所有子组件将从 DOM 中完全移除，从而节省资源并提高性能。

1. 优化 HTML 模板

使用 *ngIf 指令来控制两个视图的显示与隐藏。我们定义一个布尔型变量，例如 showTableView，来决定哪个视图应该被渲染。

<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>
            <!-- 绑定到 showTableView 变量，并使用 (ionChange) 事件来触发切换 -->
            <ion-toggle [(ngModel)]="showTableView" (ionChange)="toggleView()"></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>

说明：

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

• ng-container 是一个 Angular 特有的标签，它不会被渲染到 DOM 中，只作为 *ngIf 等结构化指令的宿主，避免引入不必要的 DOM 节点。你也可以直接在 app-tableview 和 canvas 标签上使用 *ngIf。
• [(ngModel)]="showTableView" 实现了双向数据绑定，ion-toggle 的状态会同步更新 showTableView 变量。
• (ionChange)="toggleView()" 在切换状态时触发一个方法，尽管有了 [(ngModel)]，这个方法在当前场景下可能不是严格必需的，但可以用于执行额外的逻辑。

2. 简化 TypeScript 逻辑

由于 ion-toggle 已经通过 [(ngModel)] 自动更新了 showTableView 变量，我们只需要在组件类中定义这个变量即可。如果需要执行额外逻辑，可以在 toggleView() 方法中处理。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-views',
  templateUrl: './views.page.html',
  styleUrls: ['./views.page.scss'],
})
export class ViewsPage implements OnInit {
  showTableView: boolean = false; // 默认为图表视图 (false)，即不显示表格视图

  constructor() { }

  ngOnInit() {
    // 可以在这里初始化数据或视图状态
  }

  // 当 ion-toggle 状态改变时触发，但由于 [(ngModel)] 已经处理了变量更新，
  // 这个方法更多是用于执行额外的副作用逻辑，例如数据加载。
  toggleView() {
    console.log('视图已切换，当前显示表格视图:', this.showTableView);
    // 根据 showTableView 的新值加载对应视图的数据或执行其他操作
  }
}

代码解析：

• showTableView: boolean = false; 初始化 showTableView 为 false，表示默认显示图表视图。当用户点击 ion-toggle 时，showTableView 会在 true 和 false 之间切换。
• 当 showTableView 为 true 时，<ng-container *ngIf="showTableView"> 中的 app-tableview 会被添加到 DOM 中，而 <ng-container *ngIf="!showTableView"> 中的 canvas 则会被移除。
• 反之，当 showTableView 为 false 时，app-tableview 被移除，canvas 被添加。

总结与最佳实践

通过上述改进，我们实现了高效且符合 Angular 范式的视图切换：

1. *利用 `ngIf` 进行条件渲染：** 这是 Angular 中控制元素显示/隐藏的最佳方式，它通过添加或移除 DOM 元素来管理视图，而不是简单地隐藏。这有助于减少内存占用，提高渲染性能。
2. 避免直接 DOM 操作： 在 Angular 应用中，应尽量避免使用 document.getElementById 等原生 JavaScript DOM 操作。Angular 提供了强大的数据绑定和指令系统来管理视图，遵循这些范式可以使代码更健壮、更易于维护。
3. 使用 [(ngModel)] 简化状态管理： 对于表单元素如 ion-toggle，[(ngModel)] 提供了便捷的双向数据绑定，自动同步 UI 状态和组件属性。
4. ng-container 的妙用： 当你只需要一个结构化指令的宿主，而不想在 DOM 中引入额外的 HTML 元素时，ng-container 是一个非常好的选择。

通过遵循这些最佳实践，您的 Ionic/Angular 应用将拥有更清晰的代码结构、更高的性能和更好的可维护性。

以上就是Ionic/Angular 视图切换最佳实践：利用 *ngIf 实现高效动态展示的详细内容，更多请关注php中文网其它相关文章！