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 ----*/
最终效果：
