如何创建共享模块

Question

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

- 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()。

当我访问该网址时，我得到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.

我认为我需要创建一个共享模块，但我仍在努力思考如何做到这一点。我从以下内容开始：

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

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

但我被困在“我现在该怎么办？”。如果还不清楚，我在这里有点盲目，所以如果我追求错误的解决方案，请指出。

Answer 1

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

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

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

比在您的核心模块中只需简单地导入您的 SharedModule ：

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

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

有用的链接：

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