离子4使用模态通过模态控制器

Question

我正在使用Ionic 4并希望使用ModalController来使用模态.在Ionic 3.x中它非常简单,但我在Ionic 4中遇到了一些错误:

我正在尝试启动Modal的页面:

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, ModalController } from '@ionic/angular';
import { MyModalPage } from '../MyModalPage/MyModalPage.page';

@Component({
  selector: 'app-product-display',
  templateUrl: './product-display.page.html',
  styleUrls: ['./product-display.page.scss'],
})
export class ProductDisplayPage implements OnInit {

  private params:any = {};
  public product:product = {};

  constructor(

    public modalCtrl : ModalController
  ) { 

  }//End of Constructor

  ngOnInit() {
  }

  async openModal()
  {

    var data = { message : 'hello world' };

    const modalPage = await this.modalCtrl.create({
      component: MyModalPage, 
      componentProps:{values: data}
    });

    return await modalPage.present();
  }

}

我的模态页面:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.html',
  styleUrls: ['./my-modal.page.scss'],
})
export class MyModalPage implements OnInit {

  constructor(

  ) { }//End of Constructor

  ngOnInit() {
  }//End of ngOnInit

  closeModal()
  {


    //TODO: Implement Close Modal this.viewCtrl.dismiss();
  }

}//End of Class

我收到一个错误,声明它可能没有包含在条目组件中:

错误错误:未捕获(在承诺中):错误:找不到MyModalPage的组件工厂.你有没有把它添加到@ NgModule.entryComponents？错误:找不到MyModalPage的组件工厂.你有没有把它添加到@ NgModule.entryComponents？

当我将它添加到产品显示模块的入口组件时,我得到另一个错误,说明它尚未导入.当我将它添加到产品显示模块的导入时,我得到以下内容:

core.js:1671 ERROR错误:未捕获(在承诺中):错误:模块'ProductDisplayPageModule'导入的意外指令'MyModalPage'.请添加@NgModule注释.错误:模块'ProductDisplayPageModule'导入的意外指令'MyModalPage'.请添加@NgModule注释.

我如何使用模态控制器在Ionic 4/Angular 6中呈现模态？

谢谢

Answer 1

不幸的是,Ionic v4 Modals不能延迟加载一个页面(但是,我希望以后可以使用它).因此,您必须像以前一样导入组件,但是,您还需要将其添加到app模块中的声明中.像这样:

@NgModule({
    declarations: [
        AppComponent,
        MyModalPage
    ],
    entryComponents: [
        MyModalPage
],
...

希望这可以帮助!我相信文档会在这一点上有所改进,因为我也遇到了这个问题.