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

目前尚不清楚" contectus"对象的来源，没有进口。此示例链接到此处：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

最简单的方法是生成模态内容页面：

ionic g ModalPage

然后，您必须打开Modal-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>

然后，您必须在应用模块的声明和输入附件中导入。

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

Answer 3

您可以在文档存储库中找到一个工作示例。

目前尚不清楚" contectus'对象的来源，有 没有进口。

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用于创建模态。请注意，建议每个文件仅包含一个组件，因此理想情况下，您可以在其他文件中创建以用作模态的页面。