ng2-slim-loading-bar不能在角2中工作

Question

我在Angular 2中實現了slim loding進度條，但它不工作。當我點擊它時，我將它設置爲單擊按鈕，沒有任何事情發生。所以請幫助我。

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(); 
    } 
    } 



}