Ionic 2 Modal无法正确显示

Question

我正在尝试在example on the website之后测试在Ionic 2中显示模态但是我将模态显示为没有内容的灰色叠加。 （如图所示）。 该项目是使用ionic start demo1 sidemenu --v2

创建的

我只想在点击按钮时显示模态。

致电页面

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { MyModal } from './modal/modal'

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  constructor(public modalCtrl: ModalController) {
  }
  presentModal() {
    let myModal = this.modalCtrl.create(MyModal);
    myModal.present();
  }

}

模态页面......

import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';

@Component({
    template: `
<ion-content>
  <h1>Hello</h1>
</ion-content>>
    `
})
export class MyModal {

    constructor(public viewCtrl: ViewController, private params: NavParams) {
    }
}

这是在Chrome和MS Edge中这样呈现的。但是如果窗口缩小到一定的大小，灰色区域会消失，但仍然没有内容。

我有什么遗漏或这是一个已知问题吗？

Answer 1

我设法解决了这个问题。

问题是模态组件未在app模块文件中定义...

所以我必须将MyModal添加到declarations和entryComponents个集合中

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { MyModal } from '../pages/page1/modal/modal';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2,
    MyModal
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2,
    MyModal
  ],
  providers: []
})
export class AppModule { }