Question

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

[DataContract] // Add this
public class TestClass
{
    public int Test1 { get; set; }
    public int Test2 { get; set; }
    [IgnoreDataMember]
    public int Test3 { get; set; }
}

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

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

所以在我的笔记中。这个功能应该起作用

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

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

但是离子告诉我：

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

这是我的环境：
离子框架：3.9.2
离子应用程序脚本：3.1.2
角核：5.0.1
Angular Compiler CLI：5.0.1
节点：8.4.0
OS平台：Windows 10
导航平台：Win32
用户代理：Mozilla / 5.0（Linux; Android 6.0; Nexus 5 Build / MRA58N）AppleWebKit / 537.36（KHTML，如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();
}

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

1 个答案: