Question

我在Angular 2中实现了瘦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

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



}

Answer 2

以下是样本组件 -

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

看看这是否有帮助。

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

2 个答案: