离子模态开启误差:离子3

Question

我是新来的。我试着按一下打开Modal。但它会产生运行时错误。

page.html

<ion-icon ios="ios-add" md="md-add" class="p-info-btn" (click)="presentModal()"></ion-icon>

page.ts

export class ResumePage {
    constructor( public modalCtrl: ModalController) {}

    presentModal() {
        let modal = this.modalCtrl.create('PersonalInformationFormPage');
        modal.present();
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad ResumePage');
    }
}

错误：

Runtime Error
Uncaught (in promise): invalid link: PersonalInformationFormPage

PersonalInformationFormPage:

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

@Component({ 
    selector: 'page-personal-information-form',
    templateUrl: 'personal-information-form.html'
})
export class PersonalInformationFormPage { 
    constructor(public navCtrl: NavController, public navParams: NavParams){ }
    ionViewDidLoad() {
        console.log('ionViewDidLoad PersonalInformationFormPage'); 
    }
}

Answer 1

由于您将一个string传递给modalCtrl.create()，所以您将延迟加载页面/模式。那么你的模式应该有自己的模块。或者在声明更多页/组件的模块中传递给IonicPageModule.forChild()。

确保您的personal-information-form-page.module.ts看起来如下所示：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PersonalInformationFormPage } from './personal-information-form-page';

@NgModule({
    imports: [
        IonicPageModule.forChild(PersonalInformationFormPage)
    ],
    declarations: [
        PersonalInformationFormPage
    ]
})
export class PersonalInformationFormPageModule{}

并将@IonicPage-decorator添加到页面中：

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

@IonicPage(),
@Component({ 
    selector: 'page-personal-information-form',
    templateUrl: 'personal-information-form.html'
})
export class PersonalInformationFormPage { 
    ...
}