6、Modal

1、首先Modal是一个内容窗格、通常用来做一个选择或编辑。

先来看一下 tabs.html 做了什么。

/* --- tabs.html ----*/

<ion-navbar *navbar hideBackButton>
  <ion-title>Modals</ion-title>
</ion-navbar>

<ion-content>

  <ion-list>
    <ion-list-header>
      Hobbits
    </ion-list-header>
    <a ion-item (click)="openModal({charNum: 0})">
      Gollum
    </a>
    <a ion-item (click)="openModal({charNum: 1})">
      Frodo Baggins
    </a>
    <a ion-item (click)="openModal({charNum: 2})">
      Sam
    </a>
  </ion-list>

</ion-content>

/* --- tabs.html ----*/

上述常见了 3个 item 并对每个 item监听了一个 click方法 传了一个参数。 来看 tabs.js

/* --- tabs.js ----*/

import { Modal, NavController, Page} from 'ionic-angular';
import { ModalsContentPage } from './modal.js'

@Page({
  templateUrl: 'build/pages/tabs/tabs.html',
})

export class TabsPage {

  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
      this.nav = nav;
  }

  openModal(characterNum) {

    let modal = Modal.create(ModalsContentPage, characterNum);
    this.nav.present(modal);

  }

}

/* --- tabs.js ----*/

首先 我导入了。import { Modal, NavController, Page } from 'ionic-angular';  page不用说啦。

还记得。navController么？他是用来控制路由的 。我记得原来 用他路由传参数是。

this.nav.push( ItemDetailsPage , {

       item: item

});

 

那这里用的是 this.nav.present(modal); 看完以前的章节 可以得知当创建loading alert的时候 他都用的是 present 而不是 push那代表着。其实他本身并不是导航到另一个路由

而是变成一个层。覆盖到 我们的页面之上。这点要记住。Modal.create的方法接受个两个参数 一个是组件。一个就是我们的参数。。我们在来看 modal.js 是怎么接收这个参数的。

/* --- modal.js ----*/

import { NavParams, Page,ViewController} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/tabs/modal.html',
})
export class ModalsContentPage {
    static get parameters() {
        return [[NavParams],[ViewController]];
    }

    constructor(params,viewCtrl) {
        this.params = params;
        this.viewCtrl = viewCtrl;
        var characters = [
            {
                name: 'Gollum',
                quote: 'Sneaky little hobbitses!',
                image: 'img/1.jpg',
                items: [
                    { title: 'Race', note: 'Hobbit' },
                    { title: 'Culture', note: 'River Folk' },
                    { title: 'Alter Ego', note: 'Smeagol' }
                ]
            },
            {
                name: 'Frodo',
                quote: 'Go back, Sam! I\'m going to Mordor alone!',
                image: 'img/1.jpg',
                items: [
                    { title: 'Race', note: 'Hobbit' },
                    { title: 'Culture', note: 'Shire Folk' },
                    { title: 'Weapon', note: 'Sting' }
                ]
            },
            {
                name: 'Samwise Gamgee',
                quote: 'What we need is a few good taters.',
                image: 'img/1.jpg',
                items: [
                    { title: 'Race', note: 'Hobbit' },
                    { title: 'Culture', note: 'Shire Folk' },
                    { title: 'Nickname', note: 'Sam' }
                ]
            }
        ];
        this.character = characters[this.params.get('charNum')];
    }

    dismiss() {
        this.viewCtrl.dismiss();
    }
}

/* --- modal.js ----*/

首先呢 我导入了。import { NavParams, Page, ViewController } from 'ionic-angular';

同样的 虽说我们路由的导航 从 this.nav.push( )变成了 this.nav.present() 但是我们从接收参数的方法并没有改变。我们同样是用this.params.get('charNum')获取参数

1、解析一下 constructor里的代码 

     1、var characters 其实就是获取一个局部变量里面的数组就是数据。

  2、this.params.get('charNum') 获取一个参数 在 tabs.html 里我们得知他的参数返回一个number类型。 所以获取到了 var characters 数组中的一条数据

    3、this.character 其实就相当于 ng1中的 $scope.character 他本身跟局部变量 var characters 并没有关系，所以这里把得到的数据 给作用域 this.character

2、来看 dismiss 方法 this.viewCtrl.dismiss(); viewCtrl : ViewController 中的 ViewController  他又是啥呢？ 因为 modal 他的创建 是覆盖页面变成一个层 ，所以把这个层去除掉的时候

就需要用到 this.viewCtrl.dismiss();这个方法了。之后在来看 modal.html页面。

/* --- modal.html ----*/

<ion-toolbar>
    <ion-title>
        Description
    </ion-title>
</ion-toolbar>

<ion-content padding>
    <ion-list>
        <ion-item>
            <ion-avatar item-left>
                <img src="{{character.image}}">
            </ion-avatar>
            <h2>{{character.name}}</h2>
            <p>{{character.quote}}</p>
        </ion-item>

        <ion-item *ngFor="let item of character['items']">
            {{item.title}}
            <ion-note item-right>
                {{item.note}}
            </ion-note>
        </ion-item>
    </ion-list>
    <button  block (click)="dismiss()">关闭 modal</button>
</ion-content>

/* --- modal.html ----*/

最终效果：