angular - ionic 4 通过模态 Controller 使用模态

Question

我正在使用 Ionic 4 并希望通过 ModalController 使用模态。在 Ionic 3.x 中，它相当简单，但我在 Ionic 4 中遇到了一些错误:

我尝试启动模式的页面:

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

我收到一条错误消息，指出它可能未包含在入口组件中:

ERROR Error: Uncaught (in promise): Error: No component factory found for MyModalPage. Did you add it to @NgModule.entryComponents? Error: No component factory found for MyModalPage. Did you add it to @NgModule.entryComponents?

当我将它添加到产品展示模块的入口组件时，我收到另一个错误，指出它尚未导入。当我将它添加到 Product Display Module 的导入时，我得到以下信息:

core.js:1671 ERROR Error: Uncaught (in promise): Error: Unexpected directive 'MyModalPage' imported by the module 'ProductDisplayPageModule'. Please add a @NgModule annotation. Error: Unexpected directive 'MyModalPage' imported by the module 'ProductDisplayPageModule'. Please add a @NgModule annotation.

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

谢谢

Answer 1

不幸的是，Ionic v4 Modals 无法延迟加载页面(不过，我希望稍后可以)。所以你必须像你一样导入组件，但是，你还需要将它添加到应用程序模块的声明中。像这样:

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

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