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

论文详细阐述了在 Ionic/Angular 应用中，如何利用 ion-toggle 按钮高效且优雅地切换图表和表格视图。我们将探讨避免直接 DOM 操作的常见陷阱，并重点介绍如何通过 Angular 的格式化指令 *ngIf实现组件的显示条件渲染，保证视图的正确与否，从而提升应用性能和代码可维护性。视图切换的常见挑战与误区

在构建具有多种数据展示模式（例如图表视图和表格视图）的Ionic/Angular应用时，用户通常希望通过一个交互元素（如切换按钮）来动态切换这些视图。一个常见的最终尝试是使用 HTML 的隐藏属性结合 JavaScript 进行 DOM 操作，如下所示：lt；ion-itemgt； lt；ion-labelgt；切换到表格视图lt；/ion-labelgt；lt；ion-toggle (click)=quot；showTable()quot；gt；lt；/ion-togglegt；lt；/ion-itemgt；lt；!-- 视图区域 --gt；lt；app-tableview hide=quot；truequot； id=quot；tableviewquot；gt；lt；/app-tableviewgt；lt；canvas height=quot；200quot；#lineCanvasgt；lt；/canvasgt；登录后复制

以及响应 TypeScript逻辑：showTable() { if (this.tableHidden === true) { this.tableHidden = false； document.getElementById(quot；tableviewquot；).hidden = false； } else if (this.tableHidden === false) { this.tableHidden = true； document.getElementById(quot；tableviewquot；).hidden = false； // 这里的逻辑问题，反正都存在显示表格}}登录后复制

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

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

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

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

lt；ion-headergt； lt；ion-toolbar class=“；toolbar-color”；gt； lt；ion-titlegt；视图切换 lt；/ion-titlegt； lt；/ion-toolbargt；lt；/ion-headergt；lt；ion-content class=“；ion-padding”；gt； lt；ion-gridgt； lt；ion-rowgt； lt；ion-colgt； lt；div class=quot；ion-text-start"；gt； lt；ion-itemgt； lt；ion-labelgt；切换到表格视图lt；/ion-labelgt； lt；!-- 绑定到 showTableView 变量，并使用 (ionChange) 事件来触发切换 --gt； lt；ion-toggle [(ngModel)]=quot；showTableViewquot； (ionChange)=quot；toggleView()quot；gt；lt；/ion-togglegt； lt；/ion-itemgt； lt；/divgt； lt；/ion-colgt； lt；/ion-rowgt； lt；ion-rowgt； lt；ion-colgt； lt；!-- 当 showTableView 为 true 时显示表格视图 --gt； lt；ng-container *ngIf=quot；showTableViewquot；gt； lt；app-tableviewgt；lt；/app-tableviewgt； lt；/ng-containergt； lt；!-- 当 showTableView 为false 时显示图表视图 --gt； lt；ng-container *ngIf=quot；!showTableViewquot；gt； lt；canvas height=quot；200quot； #lineCanvasgt；lt；/canvasgt； lt；/ng-containergt； lt；/ion-colgt； lt；/ion-rowgt； lt；/ion-gridgt；lt；/ion-contentgt；登录后复制

说明： ViiTor 实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116 查看详情 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)] 已经处理了指标更新， //这个方法更多是用于执行额外的副作用逻辑，例如数据加载。 console.log('视图已切换，当前显示表格视图：'， this.showTableView)； // 根据 showTableView 的新值加载回复视图的数据或执行其他操作 }}登录后复制

代码解析：showTableView： boolean = false；初始化 showTableView 为 false，表示默认显示图表视图。当用户点击 ion-toggle 时，showTableView 会在 true 和 false 之间切换。

showTableView 为 true 时，lt；ng-container *ngIf="showTableView"gt；中的 app-tableview 会被添加到 DOM 中，而 lt；ng-container *ngIf="!showTableView"gt； 当中的 canvas 被移除。反之，当 showTableView 为 false 时，app-tableview 被移除，canvas被添加。总结与最佳实践

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

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

以上就是Ionic/Angular 视图切换最佳实践：利用*ngIf 实现高效动态展示的详细内容，更多请关注乐哥常识网其他文章！ HTML表格如何设置未知样式_HTML表格未知样式的CSS设置技巧 html超链接字体颜色修改CSS代码是什么 html超链接字体颜色修改需要了解哪些CSS知识 html超链接修改字体颜色使用哪个CSS属性名