Angular 离子4：模态不显示

我试图在Angular 6应用程序中使用Ionic 4的模态组件，该应用程序甚至安装了引导程序，但我遇到了一些问题。我确信模态已经创建，因为我记录了指令创建的html：

const modal = await this.modalController.create({
   component: ModalPage
});
console.log(modal);
return modal.present();

它返回类似于

<ion-modal class="sc-ion-modal-ios-h sc-ion-modal-ios-s modal modal-ios hydrated show-modal" id="ion-overlay-1" no-router="" aria-modal="true" style="z-index: 20001;"><ion-backdrop class="sc-ion-modal-ios hydrated" tabindex="-1" style="opacity: 0.4;"></ion-backdrop><div role="dialog" class="modal-wrapper modal-wrapper-ios sc-ion-modal-ios" style="transform: translateY(0%); opacity: 1;"><app-manutenzioni-storico _nghost-c1="" class="ion-page"><ion-header _ngcontent-c1="" class="header header-ios hydrated"><ion-toolbar _ngcontent-c1="" class="hydrated"><ion-title _ngcontent-c1="" class="title-ios hydrated">manutenzioni-storico</ion-title></ion-toolbar></ion-header><ion-content _ngcontent-c1="" padding="" class="overscroll hydrated" style="--offset-top:0px; --offset-bottom:0px;"><ion-button _ngcontent-c1="" expand="block" routerlink="/manutenzioni-nuova" tabindex="0" ng-reflect-expand="block" ng-reflect-router-link="/manutenzioni-nuova" class="button button-block button-solid ion-activatable ion-focusable hydrated">Nuova Manutenzione</ion-button><ion-list _ngcontent-c1="" class="list list-ios hydrated"><ion-item _ngcontent-c1="" class="in-list item ion-focusable hydrated item-label"><ion-label _ngcontent-c1="" class="sc-ion-label-ios-h sc-ion-label-ios-s hydrated">Pokémon Yellow</ion-label></ion-item><ion-item _ngcontent-c1="" class="in-list item ion-focusable hydrated item-label"><ion-label _ngcontent-c1="" class="sc-ion-label-ios-h sc-ion-label-ios-s hydrated">Mega Man X</ion-label></ion-item><ion-item _ngcontent-c1="" class="in-list item ion-focusable hydrated item-label"><ion-label _ngcontent-c1="" class="sc-ion-label-ios-h sc-ion-label-ios-s hydrated">The Legend of Zelda</ion-label></ion-item><ion-item _ngcontent-c1="" class="in-list item ion-focusable hydrated item-label"><ion-label _ngcontent-c1="" class="sc-ion-label-ios-h sc-ion-label-ios-s hydrated">Pac-Man</ion-label></ion-item><ion-item _ngcontent-c1="" class="in-list item ion-focusable hydrated item-label"><ion-label _ngcontent-c1="" class="sc-ion-label-ios-h sc-ion-label-ios-s hydrated">Super Mario World</ion-label></ion-item></ion-list></ion-content></app-manutenzioni-storico></div></ion-modal>

list.page.ts

import { Component, OnInit } from '@angular/core';
import {ModalPage} from '../modal/modal.page';
import {ModalController} from '@ionic/angular';

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

constructor(public modalController: ModalController) {  }
async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage
    });
    console.log(modal);
    return modal.present();
  }
}

模态没有显示。我已经试过好几次了，但都没有成功。我做错什么了吗

---

提前谢谢

您是否在app.module.ts imports中导入了ManutenzionistoricPageModule/ModalPageModule？是的，我尝试过，但结果是：类型ModalPage是两个模块声明的一部分：ModalPageModule和ListPageModule！请考虑将MODALPAGE移动到导入MODALPAGE模块和ListPageModule的更高模块中。您还可以创建一个新的NgModule，该模块导出并包含ModalPage，然后在modalgemodule和ListPageModule中导入该NgModule。答案就是——只需在一个模块中导入

ModalPage

一次即可。不要在

modalpage模块

和

ListPageModule

中导入它。您只需要

ModalPage

组件，对吗？如果您没有在任何路线中使用它，您可以删除

ModalPageModule

（我认为您不应该这样做）。您是否通过爱奥尼亚g页面模式创建了模式？最好是通过

ionic g component modal

创建它，在声明中删除ModalPage，在

list.module.ts中删除entryComponent。要访问ModalPage，在
app.module.ts
中导入
ModalPageModule
就足够了。您是否在app.module.ts导入中导入了ManutenzionistoricPageModule/ModalPageModule？是的，我尝试过，但结果是：类型ModalPage是两个模块声明的一部分：ModalPageModule和ListPageModule！请考虑将MODALPAGE移动到导入MODALPAGE模块和ListPageModule的更高模块中。您还可以创建一个新的NgModule，该模块导出并包含ModalPage，然后在modalgemodule和ListPageModule中导入该NgModule。答案就是——只需在一个模块中导入
ModalPage
一次即可。不要在
modalpage模块
和
ListPageModule
中导入它。您只需要
ModalPage
组件，对吗？如果您没有在任何路线中使用它，您可以删除
ModalPageModule
（我认为您不应该这样做）。您是否通过爱奥尼亚g页面模式创建了模式？最好是通过
ionic g component modal
创建它，在声明中删除ModalPage，在
list.module.ts中删除entryComponent。要访问ModalPage，在
app.module.ts
中导入
ModalManageModule
就足够了。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { ListPage } from './list.page';
import {ModalPage} from '../modal/modal.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ListPage
      }
    ])
  ],
  declarations: [ListPage, ModalPage],
  entryComponents:
  [
    ModalPage
  ]
})
export class ListPageModule {}

import { Component, OnInit } from '@angular/core';
import {ModalPage} from '../modal/modal.page';
import {ModalController} from '@ionic/angular';

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

constructor(public modalController: ModalController) {  }
async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage
    });
    console.log(modal);
    return modal.present();
  }
}