如何在 Ionic 中使用一个组件并延迟加载?

Question

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

错误

错误： 未捕获 (在承诺中)： 错误： 模板解析错误： "搜索网站"不是一个已知的元素： 1. 如果"搜索站点"是 Angular 组件，请验证它是否是此模块的一部分。 2. 如果"搜索站点"是 Web 组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的"@NgModule.schemas" 以禁止显示此消息。(">

[错误 ->]

")： ng:///ListPageModule/ListPage.html@7:1 错误：模板 解析错误："搜索网站"不是已知元素： 1. 如果"搜索站点"是 Angular 组件，请验证它是否是此模块的一部分。 2. 如果"搜索站点"是 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 { }