web-dev-qa-db-ja.com

ionic 4 modalcontroller経由でモーダルを使用

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

エントリコンポーネントに含まれていない可能性があることを示すエラーが表示されます。

エラーエラー：キャッチされません（約束）：エラー：MyModalPageのコンポーネントファクトリが見つかりません。 @ NgModule.entryComponentsに追加しましたか？エラー：MyModalPageのコンポーネントファクトリが見つかりません。 @ NgModule.entryComponentsに追加しましたか？

製品表示モジュールのエントリコンポーネントに追加すると、インポートされていないことを示す別のエラーが表示されます。 Product Display Moduleのインポートに追加すると、次のようになります。

core.js：1671エラーエラー：キャッチされません（約束）：エラー：モジュール 'ProductDisplayPageModule'によってインポートされた予期しないディレクティブ 'MyModalPage'。 @NgModuleアノテーションを追加してください。エラー：モジュール 'ProductDisplayPageModule'によってインポートされた予期しないディレクティブ 'MyModalPage'。 @NgModuleアノテーションを追加してください。

モーダルコントローラを使用して、Ionic 4/Angular 6？

ありがとう

angularionic-frameworkmodal-dialog
8
user3836415

残念ながらIonic v4 Modalsはページを遅延ロードできません（ただし、後でこれが可能になると期待しています）。 appモジュールの宣言に追加します。

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

お役に立てれば！私もこの問題に遭遇したので、ドキュメントはこの点で改善されると確信しています。

13
bashoogzaad