如何通过延迟加载在 Ionic 中使用另一个组件？

Question

我有两个组件：ListPage 和 SearchSite。第二个有selector: 'search-sites'。在延迟加载之前，我只是将<search-sites></search-sites> 放入模板中，仅此而已。添加延迟加载后出现错误：

ERROR 错误：未捕获（承诺）：错误：模板解析错误： 'search-sites' 不是已知元素： 1. 如果“search-sites”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“search-sites”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 压制此消息。 ("

[错误->]

"): ng:///ListPageModule/ListPage.html@7:1 错误：模板 解析错误：“搜索站点”不是已知元素： 1. 如果“search-sites”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“search-sites”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 压制此消息。 ("

SearchSite 在主NGModule 文件中声明。

Answer 1

注意：我还在学习如何使用延迟加载功能，所以如果我说错了，请随时编辑答案。

---

另一个注意事项：如果要在 模态框中使用该组件，请像延迟加载的新页面一样创建它并像这样使用它：

let profileModal = this.modalCtrl.create('Profile', { userId: 8675309 });
profileModal.present();

---

因此，如果组件不打算在模态中使用，请首先为您的组件创建一个模块，如下所示：

// your-component.module.ts

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

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

// Component
import { YourComponent } from '../folder/your-component';

@NgModule({
    imports: [IonicModule],
    declarations: [YourComponent],
    exports: [YourComponent]
})
export class YourComponentModule { }

AFAIK，在使用延迟加载时，我们需要在使用它的每个模块中导入组件/管道。一些用户喜欢将所有组件包含在一个共享模块中，而另一些用户则喜欢为每个组件创建一个专用模块。

请记住，每个页面的模块都会获得它自己的组件代码副本，所以我认为最好为每个组件创建一个模块，这样每个页面只加载它真正需要工作的代码正确地，而不是用以后不使用的东西加载更大的模块。

之后，转到页面的模块文件并像这样导入组件的模块：

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

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

// Components
import { YourComponentModule } from '../folder/your-component.module';

// Pages
import { YourPage } from './your-page';

@NgModule({
    declarations: [YourPage],
    imports: [YouComponentModule, IonicPageModule.forChild(YourPage)],
    exports: [YourPage]
})
export class YourPageModule { }