How to load SVG synchronous by using snap.svg in Angular 2 component constructor?

import { Component } from '@angular/core';
import { ChildComponent } from 'child.component';


@Component({
  selector: 'parent',
  directives: [ChildComponent]
})
export class AppComponent {
  
  svgPath: string = "assets/svg/sprites.svg"
  SVGElements: any;

  constructor(){
    var self = this;
    
    Snap.load(svgPath, function(items) {
      
      items.selectAll().forEach(function(item) {
        var clone = item.clone()        
        self.SVGElements.push(clone);
      });      

    }

    //this show empty, I know because snap.load is an async call 
    console.log(this.SVGElements);

  }

  ngOnInit() {
    //I want to do something with this.SVGElements here
  }
}

Copyright Notice：Content Author:「John」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/37488913/how-to-load-svg-synchronous-by-using-snap-svg-in-angular-2-component-constructor