Angularjs 离子2模式显示不正确

我试图测试显示在离子2模式后，但我得到的模式显示为灰色覆盖没有内容。（如图所示）。 该项目是使用ionic start demo1侧菜单--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) {
    }
}

从'@angular/core'导入{Component}；
从“ionic angular”导入{NavParams，ViewController}；
@组成部分({
模板：`
你好
>
`
})
导出类MyModal{
构造函数（公共viewCtrl:ViewController，私有参数：NavParams）{
}
}

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

我是否遗漏了什么，或者这是一个已知的问题

---

我已经设法解决了这个问题

问题是应用程序模块文件中未定义模态组件

因此，我必须将MyModal添加到

声明

和

入口组件

集合中

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 { }

---

我已经设法解决了这个问题

问题是应用程序模块文件中未定义模态组件

因此，我必须将MyModal添加到

声明

和

入口组件

集合中

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 { }

---

在app.module.tsin app.module.ts中