Question

我试图在甚至安装了Bootstrap的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.html

<ion-button color="warning" (click)="presentModal()">Open modal</ion-button>

list.module.ts

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 {}

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();
  }
}

模态不显示。我已经尝试了几次和教程，但是没有成功。我做错什么了吗？

谢谢！

离子4：模态不显示

0 个答案: