angular4解决资源加载分散

问题产生的原因：
使用svg的时候每个要用svg的组件都要去注入加载一遍svg
首先是初始版本：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  @Output() toggle = new EventEmitter<void>();

  constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('gifts', sanitizer.bypassSecurityTrustResourceUrl('assets/xxx.svg'))
  }

  ngOnInit() {
  }

  openSideBar() {
    this.toggle.emit();
  }

}

这是一个header组件的代码（注意使用svg的时候要在module中注入HttpModule），使用上面的代码的话，每一个其他组件如果要用到svg，就都要注入一遍参数，写构造函数，这样明显是有问题的，所以有了下面的解决方案:

1.首先是将冗余的代码抽取出来写成一个svg.util的工具

import { MdIconRegistry } from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";

export const loadSvgResources = (ir: MdIconRegistry, ds: DomSanitizer) => {
    ir.addSvgIcon('gifts', ds.bypassSecurityTrustResourceUrl('assets/xxx.svg'))
}

2.然后呢在要用的地方只要导入这个工具就好了，像这样

import { loadSvgResources } from '../utils/svg.util';

不过这样写了之后每次要使用的时候还是要重新导一遍，还是不好，所以再优化一下

3.在module中导入这个方法，将他写在构造函数中，这样就不用每一个component都去导入一遍了，下面是core.module的代码

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';
import { MdIconRegistry } from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { MdToolbarModule, MdIconModule, MdButtonModule } from '@angular/material';
import { HttpModule } from '@angular/http';
import { loadSvgResources } from '../utils/svg.util';

@NgModule({
  imports: [
    CommonModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule
  ],
  declarations: [
    HeaderComponent, 
    FooterComponent,
    SidebarComponent
  ],
  exports: [
    HeaderComponent,
    FooterComponent,
    SidebarComponent
  ]
})
export class CoreModule {
  /* 
    让coreMdule只加载一次
     @Optionl()表示可选，因为在第一次加载的时候coreModule是不存在的
     @SkipSelf()避免组件自身调用自身的死循环调用
  */
  constructor(@Optional() @SkipSelf() parent: CoreModule, ir: MdIconRegistry, ds: DomSanitizer) {
    if(parent) {
      throw new Error('模块已经存在，不能再次加载!')
    }
    loadSvgResources(ir, ds);
  }
}