我有一个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添加到多个模块,如下所示:
app.module.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,
generic.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多个模块,并且在各处使用共享模块。这样很好。希望能帮助到你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句