1.4.模块之间的相互引用

组件添加

在模块下新添加组件,需要在模块的declarations中声明,如下

src/app/core/core.module.ts

import {HeaderComponent} from './header/header.component';
import {FooterComponent} from './footer/footer.component';
import {SidebarComponent} from './sidebar/sidebar.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent, SidebarComponent],
  ...
})
export class CoreModule {
    ...
}

组件暴露

模块A的组件想暴露给外部模块B使用,需要在模块A的exports中声明导出。

如下暴露HeaderComponent、FooterComponent、SidebarComponent

src/app/core/core.module.ts

@NgModule({
  ...
  exports: [
    HeaderComponent,
    FooterComponent,
    SidebarComponent
  ]
})
export class CoreModule {
    ...
}

组件引用

模块间只能使用已导出的组件

模块B想使用模块A中已导出的组件,需要在模块B的imports中声明引入,如下

src/app/app.module.ts

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

Last updated

Was this helpful?