代码之家 › 专栏 › 技术社区 › Dani

在sidenav菜单上导入惰性组件

ionic3 angular

0

Dani · 技术社区 · 7 年前

我的应用程序正在使用延迟加载,但我已加载了组件 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 { }

侧菜单模块 :

从“@angular/core”导入{NgModule};
从“离子角度”导入{IonicPageModule};
从“./side menu”导入{SideMenuPage};
从“../../components/language change/language change.module”导入{LanguageChangeComponentModule};

@下一代模块({
声明:[SideMenuPage],
进口:[
IonicPageModule.forChild(侧菜单升级),
语言更改组件模块
],
导出:[SideMenuPage],
入口组件:[SideMenuPage]
})
导出类SideMenuPageModule{}

我有经典的

“语言更改”不是已知元素

1 回复 | 直到 7 年前

1

Sunil Singh 7 年前

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

检查您是否正在申报和导出 语言更改组件 从 LanguageChangeComponentModule .

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

}

如果要在整个应用程序中使用此组件,可以 import 和 export 语言更改组件模块 进入之内 AppModule .

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

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