如何在离子2中创建模态视图？

Question

文档显示您如何打开模式，但目前尚不清楚对你应该是什么样的页面将被传递给open（）方法

例如，从文档：

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

constructor(public modalCtrl: ModalController) { 

} 

presentContactModal() { 
    let contactModal = this.modalCtrl.create(ContactUs); 
    contactModal.present(); 
} 

目前还不清楚“ContactUs”对象来自何处，因此没有导入。 这个例子链接到这里：https://ionicframework.com/docs/api/components/modal/ModalController/

Answer 1

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

@Component(...) 
class HomePage { 

    constructor(public modalCtrl: ModalController) { } 
    presentContactModal() { 
     let contactModal = this.modalCtrl.create(ContactUs); 
     contactModal.present(); 
    }  
} 

///////////////下面是联系方式组分，它是在首页

@Component(...) 
class ContactUs { 

    constructor(public viewCtrl: ViewController) { 

    } 

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

Answer 2

你可以找到一个工作示例here in the docs repository。

目前还不清楚'ContactUs'对象来自哪里， 没有导入它。

ContactUs只是另一个页面，你可以使用你的应用程序的任何页面来创建一个模式。

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

@Component({ 
    templateUrl: 'template.html' 
}) 
export class BasicPage { 
    constructor(public modalCtrl: ModalController) { } 

    openModal(characterNum) { 

    let modal = this.modalCtrl.create(ModalContentPage, characterNum); 
    modal.present(); 
    } 
} 

@Component({ 
    template: ` 
<ion-header> 
    <ion-toolbar> 
    <ion-title> 
     Description 
    </ion-title> 
    <ion-buttons start> 
     <button ion-button (click)="dismiss()"> 
     <span ion-text color="primary" showWhen="ios">Cancel</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-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> 
</ion-content> 
` 
}) 
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(); 
    } 
} 

在下面的例子中，ModalContentPage用于创建模态。请注意，建议每个文件只包含一个组件，因此理想情况下，您应创建页面以用作不同文件中的模式。

Answer 3

最简单的方法是定义生成一个模式的内容页：

ionic g ModalPage 

然后你如果命令创建这个文件打开模式，content.module.ts，你必须改变

imports: [ 
    IonicModule.forChild(ModalPage), 
    ], 

TO：

imports: [ 
    IonicModule.forRoot(ModalPage), 
    ], 

然后你要添加的模态组织一些HTML代码：

<ion-header> 
    <ion-toolbar> 
    <ion-title> 
     GO OUT 
    </ion-title> 
    <ion-buttons start> 
     <button ion-button (click)="dismiss()"> 
     <span ion-text color="primary" showWhen="ios">Cancel</span> 
     <ion-icon name="md-close" showWhen="android,windows"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-toolbar> 
</ion-header> 

<ion-content> 
    <p> This is a modal test!!!! </p> 
</ion-content> 

然后，你必须在声明和应用程序模块的entryComponents进口。

import { ModalPage } from '../pages/modal-page/modal-page'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage, 
    Main, 
    ModalPage 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    HttpModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage, 
    ModalPage 
    ], 
    providers: [ 
    StatusBar, 
    SplashScreen, 
    Device, 
    {provide: ErrorHandler, useClass: IonicErrorHandler} 
    ] 
}) 

然后在页面中您想要执行的模式，你必须添加一个函数到你想用来发射它的元素。

<div full large class="button-el btn-goOut" (tap)="openModal()"> 

在您要使用的模式的页面，你必须输入：

import { ModalPage } from '../modal-page/modal-page' 

重要说明：此元素不应该在构造函数中，调用模式，你只需要做这样的：

openModal(){ 
     let modal = this.modalCtrl.create(ModalPage); 
     modal.present(); 
    }