移动系统编程-Ionic 组件 (Ionic Components)

Ionic 组件

        到目前为止，我们已经使用 HTML 小部件为 HTML 页面提供数据输入、导航和其他服务。在移动设备上，网页小部件通常难以使用且不太美观。为了与我们的应用程序进行交互，ionic 提供了所谓的“组件”与用户进行交互。不要将术语“组件”与 Angular 组件混淆。正如你将看到的，ionic 组件将构成 Angular 组件的一部分。

        在 ionic 中有两种类型的组件：

1. 可注入组件，有时仅称为 ionic 组件，使用 Angular 注入系统。这意味着它是一个提供一种或多种方法的对象，这些方法可以在 ionic 组件对象中访问。
2. 声明性组件，它们是可以插入到 Angular 模板中的标签和属性。对于声明性组件，这意味着你不必在组件类中编写代码。

        Ionic 组件是为你的移动应用程序打包的小部件。它们将使你的应用程序更加美观和易用。理解 ionic 组件与 Angular 组件之间的区别很重要。Angular 组件是具有模板和代码的 Typescript 类。Ionic 组件是实现 ionic 应用程序某些用户交互部分的用户级小部件。Ionic 组件可能对应于 Angular 组件，因为正如你所学到的，Angular 组件控制用户可视区域的一部分。然而，ionic 组件也可能是在模板中由特殊定义的标签、属性和值组成的特定代码，这些代码自动实现或使用组件。

        为了演示可注入组件，考虑一个 ionic 操作表作为示例，它是一个显示在当前页面上方的 ionic 组件，向用户呈现一系列操作选项。当它被取消时，允许用户返回到基础页面。以下图片展示了添加到 tabs 应用程序主页的操作表。

重要更新：关于在 Ionic 7 应用程序中使用 ngModel

        这是关于在你的 Ionic 7 应用程序中使用 ngModel 的重要更新。Ionic 7.0.0 最近发布，新的版本中应用程序结构发生了重大变化。如果你使用的是 Ionic 的早期版本，请忽略此指南。要检查你机器上安装的 Ionic 版本，请在命令工具中使用以下命令：Ionic -v。如果安装的版本是 7.0.0 或更新版本，请注意，app.module.ts 文件将不再存在于你的应用程序的 app 文件夹中。为了在任何表单控件（例如输入文件、单选按钮、复选框等）中使用 ngModel 指令，你需要将 FormsModule 导入到组件文件中，而不是导入到 app.module.ts 文件中。请按照以下步骤将 FormsModule 导入到应用程序的组件中：

1. 在组件文件中添加 import { FormsModule } from '@angular/forms';（例如 tab1.page.ts 文件）。
2. 在同一组件文件中的 imports 中添加 FormsModule。例如：

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [IonicModule, ExploreContainerComponent, FormsModule],
})

完成上述步骤后，你可以在同一组件的任何表单元素中使用 ngModel。

操作表 (Action Sheets)

        操作表是一个覆盖移动设备上当前可视区域的窗口。它用于向用户呈现一系列选项，用户可以选择其中一个选项，也可以取消覆盖。要取消覆盖，用户可以触摸操作表外部，或者（如果实现了）触摸覆盖上的取消选项。

        操作表从页面底部滚动显示其选项。未覆盖的页面变灰，因此用户知道他们不能与之交互。然后，用户必须选择呈现的选项之一。

        我们可以通过首先添加一个按钮来启动操作表将其添加到主页：

Do Action Sheet

        然后将操作表模块添加到组件中，如下所示：

export class Tab1Page {
  constructor(private actionSheetCtrl: ActionSheetController) {}

  async doActionSheet() {
    let actionSheet = await this.actionSheetCtrl.create({
      header: 'Select an option',
      buttons: [
        {
          text: 'Think',
          role: 'destructive',
          handler: () => {
            console.log('Think clicked');
          }
        },
        {
          text: 'Eat',
          handler: () => {
            console.log('Eat clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await actionSheet.present();
  }
}

        注意关于此操作表实现的以下几点：

1. 我们必须从 @ionic/angular 导入 ActionSheetController 模块，以便使用它。（上述代码中未显示）
2. 使用 Angular 依赖注入系统创建一个服务对象，我们可以通过它来显示操作表。首先创建操作表，然后使用对象的 present() 方法显示它。
3. 操作表的描述作为参数传递给注入对象的 create() 方法。这是以 JavaScript 对象的形式传递的。
4. 操作表的描述有两个部分，标题和按钮描述符数组。
5. 每个按钮都有一个 text 属性和一个处理程序函数，当用户点击按钮时执行。在本例中，我们只是将消息记录到控制台。
6. 两个按