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

Question

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

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'search-sites' is not a known element: 1. If 'search-sites' is an Angular component, then verify that it is part of this module. 2. If 'search-sites' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]

"): ng:///ListPageModule/ListPage.html@7:1 Error: Template parse errors: 'search-sites' is not a known element: 1. If 'search-sites' is an Angular component, then verify that it is part of this module. 2. If 'search-sites' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

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，在使用延迟加载时，我们需要在每个使用它的模块中导入 components/pipes 。一些用户喜欢将所有组件包含在一个共享模块中，而另一些用户则喜欢为每个组件创建一个专用模块。

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

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

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

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

How to use one component in other in Ionic with lazy loading?

lazy-loading

typescript

ionic-framework

ionic2

angular