Question

我是Ionic框架的新手。我尝试点击打开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 - 装饰器添加到您的页面：

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

离子模态得到错误打开：离子3

1 个答案: