使用模态组件时出现延迟加载错误

Question

你好，我正在尝试使用模态组件的延迟加载，所以我有一个这样的共享组件模块：

@NgModule({
  declarations: [
    AddNoteComponent,
    EditNoteComponent
  ],
  imports: [
    IonicModule,
  ],
  exports: [
    AddNoteComponent,
    EditNoteComponent
  ]
})
export class ComponentsModule {}

我想在 notes.ts 页面中使用它们，所以我将 componentsModule 类导入到 notes.module.ts，如下所示：

@NgModule({
  declarations: [
    NotesPage,
  ],
  imports: [
    IonicPageModule.forChild(NotesPage),
    ComponentsModule,
  ],
})
export class NotesPageModule {}

所以在我的 notes.ts 中这个功能应该可以工作

addNoteModal() {
  let noteModal = this.modalCtrl.create('AddNoteComponent', {
    'mid': this.module.key
  });
  noteModal.present();
}

当我使用延迟加载时，这应该可以正常工作，

但 ionic 告诉我：

错误错误：未捕获（承诺中）：无效链接：AddNoteComponent

这是我的环境：
Ionic Framework：3.9.2
离子应用脚本：3.1.2
角核心：5.0.1
Angular 编译器 CLI：5.0.1
节点：8.4.0
操作系统平台：Windows 10
导航平台：Win32
用户代理：Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36

Answer 1

您需要将页面用作模式，而不是常规组件。因此，如果您想创建一个包含 AddNoteComponent 内容的模式，您需要创建一个新页面（包括 @IonicPage() 装饰器，以便它可以延迟加载）导入该组件，然后使用 那个页面作为模态。

所以这将是页面：

// Angular
import { Component } from '@angular/core';

// Ionic
import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-add-note',
    templateUrl: 'add-note.html'
})
export class AddNotePage {

    constructor() { }

    // ...

}

这将是页面的模块：

@NgModule({
  declarations: [
    AddNotePage,
  ],
  imports: [
    IonicPageModule.forChild(AddNotePage),
    ComponentsModule,
    // ...
  ],
})
export class AddNotePageModule {}

这就是您使用该页面的方式：

addNoteModal() {
  let noteModal = this.modalCtrl.create('AddNotePage', {
    'mid': this.module.key
  });
  noteModal.present();
}