Question

文档向您展示了如何打开模态，但不清楚您应该将哪种页面传递给open（）方法

来自docs的例子：

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

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

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>

然后你必须导入app模块的声明和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();
  }

Answer 3

您可以找到一个有效的例子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用于创建模态。请注意，建议每个文件只包含一个组件，因此理想情况下，您要创建用作不同文件中模式的页面。

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

3 个答案: