Wie implementiert man einen Ladebildschirm während Routenübergängen in Angular 2?

@Component({})
export class AppComponent {

  @ViewChild('spinnerElement') spinnerElement: ElementRef

  constructor(private router: Router,
              private ngZone: NgZone,
              private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor)
  }

  private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      // Show spinner outside Angular's zone to prevent change detection
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }

    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Hide spinner in case of failure
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    // Hide spinner outside Angular's zone to prevent change detection
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
}

<div class="loading-overlay" #spinnerElement>