Angular專案中核心模組core Module只載入一次的實現

starof發表於2018-05-21
Angular

核心模組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=false
ng g c core/footer --spec=false
ng 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就可以了。

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：https://www.cnblogs.com/starof/p/9069181.html 有問題歡迎與我討論，共同進步。

相關文章