我有一个angular2组件,我想在多个模块之间共享。
所以我在sharedmodule下面写道,
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {GenericComponent} from './generic/generic.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ GenericComponent ],
exports: [ GenericComponent ]
})
export class SharedModule { }
然后我将这个sharedmodule添加到多个模块中,如下所示:
应用模块.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule,SharedModule ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
我还将sharedmodule添加到generic.module.ts中,类似地,
通用.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
@NgModule({
imports: [ BrowserModule,SharedModule ],
declarations: [ //.. here I have added all the components that generic uses ]
})
export class GenericModule { }
但是当我试图在generic.module.ts的组件中使用泛型组件时,我发现了下面的错误
模块“genericmodule”导入的意外值“undefined”
最佳答案
下面是我的应用程序中使用共享模块的代码:
应用模块:
import { AboutModule } from './about/about.module';
import { SharedModule } from './shared/shared.module';
import { Menubar, MenuItem } from 'primeng/primeng';
@NgModule({
imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(),
HomeModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ appRoutingProviders ]
})
export class AppModule {}
主模块:
import { SharedModule } from '../shared/shared.module';
import {routing} from './home.routing'
@NgModule({
imports: [ SharedModule, routing],
declarations: [ HomeComponent, LoginComponent, RegisterComponent, VerifyComponent,
VerifyEmailComponent, ForgotComponent, ForgotVerifyComponent,
ChangeComponent, ChallengeComponent, LogoutComponent ],
bootstrap: [ HomeComponent ],
providers: [ ]
})
export class HomeModule {}
共享模块:
@NgModule({
imports: [CommonModule, RouterModule, MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule,
DropdownModule, DialogModule, AccordionModule, CalendarModule, SelectButtonModule, CheckboxModule,
ProgressBarModule, DataTableModule],
declarations: [ ErrorMessagesComponent, FoodDashboardComponent ],
exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule,
MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
SelectButtonModule, CheckboxModule, DataTableModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent ]
})
export class SharedModule {
//
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [SettingsService, AppMenuService, AuthorizationService, LoginService, RegisterService, ThemeService, ValidationService,
NutritionixService, AuthGuardService, CalculationService, ChallengeService ]
};
}
}
我有20多个模块在我的应用程序,我使用共享模块各地。这很管用。希望有帮助。