ionic 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

가장 쉬운 방법은로 정의 할 수있는 연락처 구성 요소입니다 페이지 : 명령이 파일을 생성하면 모달-content.module.ts를 열 필요가 그런

ionic g ModalPage 

, 당신은 변경해야

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

TO

:

<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에 가져올 수 있습니다

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

그런 다음 당신은 모달 구조에 대한 몇 가지 HTML을 추가해야합니다.

그런 다음 모달을 실행하려는 페이지에서이를 실행하는 데 사용할 요소에 함수를 추가해야합니다. 당신이 모달을 사용하고자하는 페이지에서

<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(); 
    }