2016-11-09 13 views
1

Ich versuche zu testen, eine Anzeige in Ionic 2 nach der example on the website Anzeige, aber ich bekomme die modale Anzeige als graue Überlagerung ohne Inhalt. (wie auf dem Bild zu sehen). Das Projekt wurde erstellt mit ionic start demo1 sidemenu --v2Ionic 2 Modal wird nicht korrekt angezeigt

Ich möchte nur das Modal anzeigen, wenn Sie auf die Schaltfläche klicken.

aufrufen Seite ...

import { Component } from '@angular/core'; 
import { ModalController } from 'ionic-angular'; 
import { MyModal } from './modal/modal' 

@Component({ 
    selector: 'page-page1', 
    templateUrl: 'page1.html' 
}) 
export class Page1 { 

    constructor(public modalCtrl: ModalController) { 
    } 
    presentModal() { 
    let myModal = this.modalCtrl.create(MyModal); 
    myModal.present(); 
    } 

}

Modal Seite ...

import { Component } from '@angular/core'; 
import { NavParams, ViewController } from 'ionic-angular'; 

@Component({ 
    template: ` 
<ion-content> 
    <h1>Hello</h1> 
</ion-content>> 
    ` 
}) 
export class MyModal { 

    constructor(public viewCtrl: ViewController, private params: NavParams) { 
    } 
} 

Dies wie dies in Chrome und MS Edge rendeing. Der Graubereich verschwindet jedoch, wenn das Fenster auf eine bestimmte Größe reduziert wird, aber immer noch kein Inhalt.

Gibt es etwas, das ich vermisse oder ist das ein bekanntes Problem?

enter image description here

Antwort

3

Ich habe dies zu lösen geführt.

Problem war, dass die modale Komponente nicht in der App-Modul-Datei definiert wurde ...

Also muss ich MyModal in beide den declarations und entryComponents Sammlungen hinzufügen

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { Page1 } from '../pages/page1/page1'; 
import { Page2 } from '../pages/page2/page2'; 
import { MyModal } from '../pages/page1/modal/modal'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    Page1, 
    Page2, 
    MyModal 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    Page1, 
    Page2, 
    MyModal 
    ], 
    providers: [] 
}) 
export class AppModule { }