如何在離子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(); 
    }