Ionic组件之Modals

效果图：

直接上代码：

modal.ts

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { ModalContentPage } from './modal-content-page';

@Component({
    templateUrl:'modals.html'
})

export class Modals{
    constructor(public modalCtrl:ModalController){}
    openModal(characterNum){
        let modal=this.modalCtrl.create(ModalContentPage,characterNum);
        modal.present();
    }
}

modal.html

<ion-header>
    <ion-navbar>
        <ion-title>Modals</ion-title>
    </ion-navbar>
</ion-header>
<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>

modal-content-page.ts

import { Component } from '@angular/core';
import { ModalController,Platform,NavParams,ViewController } from 'ionic-angular';

@Component({
    templateUrl:'modal-content.html'
})

export class ModalContentPage{
    character;

    constructor(
        public platform:Platform,
        public params:NavParams,
        public viewCtrl:ViewController
        ){
        var characters=[
            {
                name: 'Gollum',
                quote: 'Sneaky little hobbitses!',
                image: 'assets/img/avatar-gollum.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: 'assets/img/avatar-frodo.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: 'assets/img/avatar-samwise.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-content.html

<ion-header>
    <ion-toolbar>
        <ion-title>
            Description
        </ion-title>
        <ion-buttons start>
            <button ion-button (click)="dismiss()">
                <span ion-text color="primary" showWhen="ios"></span>
                <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ion-item>
            <ion-avatar item-start>
                <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-end>
                {{item.note}}
            </ion-note>
        </ion-item>
    </ion-list>
</ion-content>