Angular 如何在Ionic中使用一个组件来实现延迟加载？

我有两个组件：

ListPage

和

SearchSite

。第二个有

选择器：“搜索站点”

。在延迟加载之前，我只是将

放入模板中，就这样。添加延迟加载后，我发现错误：

错误：未捕获（承诺中）：错误：模板分析错误： “搜索站点”不是已知元素： 1.如果“搜索站点”是一个角度组件，则验证它是否是此模块的一部分。 2.如果“search sites”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”中 以抑制此消息。（”

[错误->]

“”：ng:///ListPageModule/ListPage。html@7：1错误：模板 分析错误：“搜索站点”不是已知元素： 1.如果“搜索站点”是一个角度组件，则验证它是否是此模块的一部分。 2.如果“search sites”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”中 以抑制此消息。（”

SearchSite

是在主

NGModule

文件中声明的。

注意：我仍在学习如何使用延迟加载功能，因此如果我说错了什么，请随意编辑答案

---

另一个注意事项：如果组件将在模式中使用，请将其创建为延迟加载的新页面，并按如下方式使用：

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

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

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

请记住，每个页面的模块都会得到它自己的组件代码副本，因此我认为最好为每个组件创建一个模块，这样每个页面只加载它真正需要正常工作的代码，而不是加载一个更大的模块，其中包含以后不再使用的内容

之后，转到页面的模块文件并按如下方式导入组件的模块：

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

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

---

您可以尝试将组件也添加到页面的模块中吗？因为每个页面都是它自己的模块，所以您也需要将组件导入页面的模块中。@sebafereras您能举个例子吗？我不熟悉angular…当然：）我以前没有添加它作为答案，因为我还在学习如何使用惰性加载，但我会写一个答案，如果它不能解决问题，我会删除它Hanks，伙计，你救了我一天！我也认为你这样认为对我来说没关系！你有什么想法来声明我是否需要在模态中打开它吗？是的，在这种情况下，你需要decl将该组件视为一个页面（具有自己的.module文件），然后在创建模式时使用“”中的组件名称，如

'ComponentName'

。因此，如果该组件将在模式中使用，而不是在答案中执行类似的操作，则将其创建为一个延迟加载的新页面。