核心模块CoreModule在整个系统中只加载一次，如何实现？

创建core Modele：ng g m core

既然CoreModule是类，就有构造函数，在构造函数中进行依赖注入。

export class CoreModule {   constructor(parent: CoreModule){    if(parent){      throw new Error('模块已经存在，不能重复加载！')    }  }}

使用SkipSelf注解避免重复注入。去系统的父级找依赖。

使用Optional注解 让SkipSelf作为可选，在第一次注入时候系统中并没有CoreModule时候成功注入。

import { NgModule,SkipSelf,Optional} from '@angular/core';import { CommonModule } from '@angular/common';@NgModule({  imports: [    CommonModule  ],  declarations: []})export class CoreModule {   constructor(@Optional() @SkipSelf() parent: CoreModule){ //加上@SkipSelf()注解    if(parent){      throw new Error ('模块已经存在，不能再次加载');    }  }}

后续加了模块，后在declartions中声明后需要在exports中导出。

Header，Footer，Sidebar放到核心模块中。

ng g c core/header --spec=falseng g c core/footer --spec=falseng g c core/sidebar --spec=false

然后

import { NgModule,SkipSelf,Optional} from '@angular/core';import { CommonModule } from '@angular/common';import { HeaderComponent } from './header/header.component';import { FooterComponent } from './footer/footer.component';import { SidebarComponent } from './sidebar/sidebar.component';@NgModule({  imports: [    CommonModule  ],  declarations: [HeaderComponent, FooterComponent, SidebarComponent],  exports:[    HeaderComponent, FooterComponent, SidebarComponent  ]})export class CoreModule {   constructor(@Optional() @SkipSelf() parent: CoreModule){ //加上@SkipSelf()注解    if(parent){      throw new Error ('模块已经存在，不能再次加载');    }  }}

这样只需要在app.module.ts中imports coreModule就可以了。

 

本文作者,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处： 有问题欢迎与我讨论，共同进步。