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错误错误：未捕获（承诺中）：错误：意外模块导入的指令“ MyModalPage” “ ProductDisplayPageModule”。请添加一个@NgModule批注。错误：模块导入了意外的指令“ MyModalPage” “ ProductDisplayPageModule”。请添加@NgModule批注。

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

谢谢

Answer 1

不幸的是，Ionic v4 Modals无法延迟加载页面（但是，我希望以后能够这样做）。因此，您必须像以前一样导入组件，但是，您还需要将其添加到app模块中的声明中。像这样：

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

希望这会有所帮助！我确信在这一点上文档会有所改进，因为我也遇到了这个问题。

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

1 个答案: