ng2-スリムローディングバーがアンギュラ2で動作しない

Question

スリムなlodingプログレスバーをAngular 2で実装していますが、動作しません。クリックしても何も起こらないので、クリックしてください。

component.ts

import { Component } from '@angular/core'; 
import {SlimLoadingBarService} from 'ng2-slim-loading-bar'; 
@Component({ 
    selector:'customers', 
    pipes: [], 
    providers: [SlimLoadingBarService], 
    styles: [], 
    template: `<router-outlet></router-outlet>`, 
}) 

    export class Customers{ 

    constructor(private slimLoader:SlimLoadingBarService){} 

    gotoDetails():void{ 
    this.slimLoader.start(() => { 
      console.log('Loading complete'); 
     }); 
    } 


} 

私はgotoDetails（呼び出し）何も起こらなかったと私は問題が何であるかを知らないのですか？

Answer 1

はここ

import {Component} from '@angular/core'; 
import {SlimLoadingBarService} from 'ng2-slim-loading-bar'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>My First Angular2 App</h1> 
     <button (click)="gotoDetails()">Start Loading</button> 
     <ng2-slim-loading-bar></ng2-slim-loading-bar> 
    ` 
}) 

export class AppComponent { 

    constructor(private slimLoadingBarService: SlimLoadingBarService) { } 

    gotoDetails() { 
     this.slimLoadingBarService.start(() => { 
      console.log('Loading complete'); 
     }); 
    } 
} 

このことができますかどうかを確認サンプルコンポーネント -

です。

Answer 2

角度2のイベントを使用します。 navigationStart、navigationEndのように...

は、このコードを試してみてください。

import {Component, OnInit} from '@angular/core'; 
import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router'; 

import {SlimLoadingBarService} from 'ng2-slim-loading-bar'; 

@Component({ 
    selector: 'rb-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit , OnDestroy { 
    title = 'rb works!'; 

    constructor(private slimLoadingBarService: SlimLoadingBarService,private _router:Router){} 


    startLoading() { 
    this.slimLoadingBarService.start(() => { 
     console.log('Loading complete'); 
    }); 
    } 
    finishLoading(){ 
    this.slimLoadingBarService.complete(); 
    } 


    ngOnInit() { 
    // TODO: assign proper type to event 
    this._router.events.subscribe((event: any): void => { 
     this.navigationInterceptor(event); 
    }); 
    } 

    navigationInterceptor(event): void { 
    if (event instanceof NavigationStart) { 
     this.startLoading(); 
    } 
    if (event instanceof NavigationEnd) { 
     this.finishLoading(); } 
    if (event instanceof NavigationCancel) { 
     this.finishLoading(); 
    } 
    if (event instanceof NavigationError) { 
     this.finishLoading(); 
    } 
    } 



}