如何创建共享模块 [英] How to create a shared module

问题描述

Ionic/Angular开发的新手，我具有以下结构

Brand new to Ionic/Angular development, I have the following structure

- src
-- /app
---- app.component.ts
---- app.module.ts
---- main.ts
---- ...
-- /pages
---- /event-home
------ /event-home.module.ts
------ /event-home.ts

event-home.module.ts :

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EventHomePage } from './event-home';

@NgModule({
  declarations: [
  EventHomePage,
],
imports: [
    IonicPageModule.forChild(EventHomePage),
],
entryComponents: [
  EventHomePage
]
})
export class EventHomePageModule {}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { EventEntryPage, EventHomePage, EventDiscussionPage, 
EventHandoutsPage, EventInfoPage } from "../pages/pages";

@NgModule({
  declarations: [
    MyApp,
    EventEntryPage,
    EventHomePage,
    EventDiscussionPage,
    EventHandoutsPage,
    EventInfoPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    EventEntryPage,
    EventHomePage,
    EventDiscussionPage,
    EventHandoutsPage,
    EventInfoPage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

我正在尝试与 http://localhost:8100/#/event-home进行深层链接，在 event-home.ts 中，我使用IonicPage().

I am trying to do a deeplink to http://localhost:8100/#/event-home, which, within event-home.ts I use IonicPage().

访问网址时，我得到Error: Type EventHomePage is part of the declarations of 2 modules: AppModule and EventHomePageModule! Please consider moving EventHomePage to a higher module that imports AppModule and EventHomePageModule.

我思考我需要创建一个共享模块，但是我仍在努力地思考如何做到这一点.我开始时是这样的:

I think I need to be creating a shared module, but I'm still trying to wrap my head around how to do this. I started with something like:

import {NgModule} from "@angular/core";
import {EventHomePage} from "../pages/event-home/event-home";

@NgModule({
    declarations: [ EventHomePage ],
    exports: [ EventHomePage ]
})
export class SharedModule {}

但是我被困在现在我该怎么办?"上.如果还不清楚，我在这里有点盲目，所以如果我追寻错误的解决方案，请指出.

But I'm stuck at, "what do I do now?". If it isn't clear yet, I am kind of poking around blind here so if I'm chasing the wrong solution, please point that out.

推荐答案

只能在一个模块中声明组件，也不能以任何方式继承它们的访问权限，这意味着在主应用程序模块中声明该组件将使您无法访问它在任何其他模块中.如果您已经有一个组件被其他模块使用，那么您已经注意到它是创建共享模块的最佳且唯一的方法:

Components can be declared only in one module, and nor are their access inherited in any way, meaning declaring it in the main app module will not give you access to it in any other module. If you have a component that is used by other modules the best and only way it to create shared module as you already noticed:

import {NgModule} from "@angular/core";
import {EventHomePage} from "../pages/event-home/event-home";

@NgModule({
    declarations: [ EventHomePage ],
    exports: [ EventHomePage ]
})
export class SharedModule {}

只需在您的核心模块中导入 SharedModule 即可:

Than in your core module just simply import your SharedModule :

...
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [
    ...
    ...
  ]
  ...
})
export class AppModule {}

有用的链接:

• 共享模块和依赖注入
• 如何清理AppModule
• 角度-路由&导航

• Shared Modules and Dependency Injection
• How to clean up the AppModule
• Angular - Routing & Navigation

这篇关于如何创建共享模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！