在侧导航菜单上导入惰性组件

Question

我的应用程序正在使用延迟加载，但我在app.module中加载了组件，因为默认情况下我仍然需要它们，但大多数都加载在不同的页面/组件上。

这是side-menu.html:

<ion-content>
<ion-list>
<ion-item>
<login></login>
</ion-item>
<ion-item>
<language-change></language-change>
</ion-item>
</ion-list>
</ion-content>

默认情况下加载login，因为用户必须始终登录，所以该组件在侧菜单上工作。

language-change只在我需要的时候加载，它在其他页面上工作，但在这里不工作。这是side-menu.module:

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { SideMenuPage } from "./side-menu";
import { LanguageChangeComponentModule } from "../../components/language-change/language-change.module";
@NgModule({
declarations: [SideMenuPage],
imports: [
IonicPageModule.forChild(SideMenuPage),
LanguageChangeComponentModule
],
exports: [SideMenuPage],
entryComponents: [SideMenuPage]
})
export class SideMenuPageModule { }

language-change.module:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { LanguageChangeComponent } from './language-change';
@NgModule({
declarations: [LanguageChangeComponent],
imports: [
IonicModule
],
exports: [LanguageChangeComponent],
entryComponents: [LanguageChangeComponent]
})
export class LanguageChangeComponentModule { }

side-menu.module:

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { SideMenuPage } from "./side-menu";
import { LanguageChangeComponentModule } from "../../components/language-change/language-change.module";
@NgModule({
declarations: [SideMenuPage],
imports: [
IonicPageModule.forChild(SideMenuPage),
LanguageChangeComponentModule
],
exports: [SideMenuPage],
entryComponents: [SideMenuPage]
})
export class SideMenuPageModule { }

我得到了经典的

"语言更改"不是已知元素

Answer 1

假设language-change组件名称为LanguageChangeComponent。

检查您是否正在从LanguageChangeComponentModule声明和导出LanguageChangeComponent。

@NgModule({
//....
declarations : [LanguageChangeComponent],
exports :  [LanguageChangeComponent]
//...
})
class LanguageChangeComponentModule{
}

如果您想在整个应用程序中使用此组件，您可以将import和exportLanguageChangeComponentModule转换为AppModule。

@NgModule({
imports: [
LanguageChangeComponentModule
],
exports: [LanguageChangeComponentModule]
})
export class AppModule {}

如果你想在某个模块中使用它，那么你可以将它导入该模块，而不是AppModule。