我正在构建一个具有根模块的应用程序,然后在此模块下有3个子模块。在模块1中,有一个组件可以在模块3中重用,但是,如果我直接进入模块3中的组件URL,组件永远不会加载(我认为这是因为模块1未加载)。我已经尝试从模块1导出组件并在根模块中引导它,但是我收到错误,指出找不到组件选择器
--- ---编辑
根模块
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ManagerModule,
LogadoModule,
GeralModule,
RouterModule.forRoot(routes, {useHash: true})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
第1单元
@NgModule({
declarations: [
GeralComponent,
GeralHeaderComponent,
LoginComponent,
AtividadesListagemComponent // -> COMPONENT TO BE SHARED
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
GeralRoutingModule
],
providers: [GeralService],
exports: [GeralComponent],
bootstrap: [GeralComponent]
})
export class GeralModule{}
模块3 // - >在此模块中使用共享组件
@NgModule({
declarations: [
LogadoComponent,
AtividadesInscritoComponent,
LogadoHeaderComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
LogadoRoutingModule
],
providers: [],
exports: [LogadoComponent],
bootstrap: [LogadoComponent]
})
export class LogadoModule{}
项目结构是:
根模块 第1单元 第2单元 第3单元
----编辑2 -----
共享模块
@NgModule({
imports: [CommonModule],
exports : [
CommonModule,
AtividadesListagemComponent
],
declarations: [AtividadesListagemComponent]
})
export class SharedModule { }
根模块
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ManagerModule,
LogadoModule,
GeralModule,
RouterModule.forRoot(routes, {useHash: true})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
第1单元
@NgModule({
declarations: [
GeralComponent,
GeralHeaderComponent,
LoginComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
GeralRoutingModule,
SharedModule
],
providers: [GeralService],
exports: [GeralComponent],
bootstrap: [GeralComponent]
})
export class GeralModule{}
第3单元
@NgModule({
declarations: [
LogadoComponent,
AtividadesInscritoComponent,
LogadoHeaderComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
LogadoRoutingModule,
SharedModule
],
providers: [],
exports: [LogadoComponent],
bootstrap: [LogadoComponent]
})
export class LogadoModule{}
答案 0 :(得分:1)
当您有一个需要在多个模块之间共享的组件时,建议的方法是将组件添加到SharedModule
,然后在任何需要它的模块中导入该共享模块。
在此示例中,StarComponent由多个模块共享:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { StarComponent } from './star.component';
@NgModule({
imports: [ CommonModule],
exports : [
CommonModule,
FormsModule,
StarComponent
],
declarations: [ StarComponent ],
})
export class SharedModule { }
以下是Product模块如何导入它:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';
import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [
SharedModule,
RouterModule.forChild([
{ path: '', component: ProductListComponent },
{ path: ':id', component: ProductDetailComponent }
])
],
declarations: [
ProductListComponent,
ProductDetailComponent
]
})
export class ProductModule { }
我在这里有完整的示例代码:https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final