ionic 模态窗口
Ionic模态窗口指南
Ionic是一个基于Angular的开源移动应用程序框架。它提供了许多UI组件和内置的功能，其中一个非常有用的组件是模态窗口（Modal）。
模态窗口是一个覆盖在应用程序内容上的弹出窗口，它需要用户进行一些操作或提供反馈，以便应用程序可以进一步进行。
新建模态窗口
要在Ionic中新建模态窗口，需要使用Ionic CLI生成器并通过以下命令新建：
ionic generate page modalPage
这将在src/app/modal-page文件夹中生成一个空白的Angular组件，我们可以在其中添加需要的内容。较简单的方式是在模态窗口上添加一些文本和按钮。
打开模态窗口
要打开模态窗口，需要使用Ionic模态控制器（ModalController）。模态控制器可以注入到任何组件中，并通过该控制器创建模态窗口。
import { ModalController } from '@ionic/angular';
import { ModalPage } from './modal-page/modal-page.page';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public modalController: ModalController) {}
async openModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
return await modal.present();
}
}
上面的代码示例中，我们通过import导入了模态控制器和刚才创建的模态窗口组件，然后我们在HomePage组件里注入了模态控制器，并通过openModal方法打开模态窗口。
create方法的参数对象有两个参数：
-
component：必需，我们需要指定我们要打开的模态窗口组件。
-
componentProps：可以传递给模态窗口的值或对象。这可以是任何有效类型。
当create方法被调用时，它返回一个Promise对象，该对象可以在打开模态窗口后进行处理。
将返回的模态对象传递给present方法来显示模态窗口。
关闭模态窗口
在打开模态窗口后，我们通过以下方式关闭模态窗口:
async closeModal() {
await this.modalController.dismiss();
}
需要注意的是，modalController.dismiss()会返回Promise对象，因此需要使用async/await或.then()处理函数返回值。
传递值
要向模态窗口传递值，我们需要使用componentProps对象。 在打开模态窗口时，我们只需传递值，并在模态组件中接收它们。
我们来看一下下面示例的ModalPage组件：
import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-modal-page',
templateUrl: './modal-page.page.html',
styleUrls: ['./modal-page.page.scss'],
})
export class ModalPage implements OnInit {
@Input() value: number;
constructor(private modalController: ModalController) { }
ngOnInit() { }
async closeModal() {
await this.modalController.dismiss();
}
}
在上面的示例中，我们使用了 Angular的@Input() 装饰器，将传递给模态窗口组件的value对象作为输入属性，并在HTML模板中引用它，如下所示：
<ion-header>
<ion-toolbar>
<ion-title>
Modal Page
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="closeModal()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>
Modal Content
</ion-card-title>
</ion-card-header>
<ion-card-content>
The value passed to modal is: {{value}}
</ion-card-content>
</ion-card>
</ion-content>
在模态组件内部，我们可以使用value输入属性来获取传递的值，并在HTML模板中使用它来呈现内容。
总结
在这篇文章中，我们学习了如何使用Ionic模态控制器和创建模态窗口来显示内容和接收反馈，同时还学习了如何传递数据，以便在模态窗口中使用。