Modals

优质
小牛编辑
135浏览
2023-12-01

Modals是一个当前页面上的内容窗口。通常它是用来做选择或者编辑一个项目。

使用方法

  1. import {Page, Modal, NavController, NavParams} from 'ionic-angular';
  2. @Page(...)
  3. class HomePage {
  4. constructor(nav: NavController) {
  5. this.nav = nav;
  6. }
  7. presentProfileModal() {
  8. let profileModal = Modal.create(Profile, { userId: 8675309 });
  9. this.nav.present(profileModal);
  10. }
  11. }
  12. @Page(...)
  13. class Profile {
  14. constructor(params: NavParams) {
  15. console.log('UserId', params.get('userId'));
  16. }
  17. }

静态方法

create(componentType,data)

  • componentType any

    Modal类

  • data object

    传给Modal的数据

实例方法

注明:本实例方法在当前英文文档中没有。

onDismiss(call)

当Modal被销毁的时候执行的回调函数。
call是一个回调函数。

例子

  1. import {IonicApp, Modal, Platform, NavController, NavParams, Page, ViewController} from 'ionic-angular';
  2. @Page({
  3. templateUrl: './build/pages/modals/basic/template.html'
  4. })
  5. export class BasicPage {
  6. constructor(public nav: NavController) { }
  7. openModal(characterNum) {
  8. let modal = Modal.create(ModalsContentPage,{charNum:1});
  9. this.nav.present(modal);
  10. modal.onDismiss(data=>{console.log(data)});
  11. }
  12. }
  13. @Page({
  14. templateUrl: './build/pages/modals/basic/modal-content.html'
  15. })
  16. class ModalsContentPage {
  17. character;
  18. constructor(
  19. public platform: Platform,
  20. public params: NavParams,
  21. public viewCtrl: ViewController
  22. ) {
  23. this.character = this.params.get('charNum');
  24. }
  25. dismiss() {
  26. this.viewCtrl.dismiss({a:1,b:2});
  27. }
  28. }