Блог

Я пытаюсь использовать модальные компоненты из Ionic 4 в приложении Angular 6, в котором даже установлен Bootstrap, но у меня возникают некоторые проблемы. Я уверен, что модальный файл создан, поскольку я зарегистрировал 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();
  }
}
  

Модальный не отображается. Я пробовал несколько раз и учебные пособия, но у меня ничего не получилось. Я делаю что-то не так?

Заранее спасибо!