イオン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がモーダルを作成するために使用されています。ファイルごとに1つのコンポーネントだけを含めることをお勧めします。理想的には、別のファイルのモーダルとして使用するページを作成することになります。

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 '../modal-page/modal-page' 

重要：この要素は、あなただけのようにしなければならないモーダルを呼び出すために、コンストラクタであってはならない、あなたがインポートする必要がモーダルを使用するページで

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

：

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