Angular 2.0 如何扩展 BrowserXhr 来创建进度条？

Question

所以我正在尝试根据我的 ajax 调用制作一个准确的进度条。

这有帮助，但我认为自它编写以来，事情可能已经发生了一些变化。

所以我有我的 CustomBrowserXhr，我已经添加到我的应用程序模块提供程序来覆盖 BrowserXhr：-

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {

constructor(private service: ProgressService) {}


    build(): any {
        let xhr = super.build();
        xhr.onprogress = (event) => {
            console.log(event, "event inside browser override");
            this.service.progressEventObservable.next(event);
        };
        return <any>(xhr);
    }
}

然后我有一个非常基本的进度服务，其他组件可以订阅：-

@Injectable()
export class ProgressService {
    progressEventObservable:Subject<any> = new Subject();
    progressEvent$ = this.progressEventObservable.asObservable();
}

我以为我可以只进行 http 调用，我会看到控制台日志“浏览器覆盖内的事件” - 因为我只是收到错误“异常：browserXHR.build 不是函数”。 有人可以解释一下这里出了什么问题吗？

提前致谢。

Answer 1

编辑：我添加了对super();的调用super(); 并将一些有用的东西附加到事件对象上。

谢谢你的帮助。 这对我有用。 为简洁起见，我将这两项服务都放到了一个文件中：

import { Injectable } from '@angular/core';
import { BrowserXhr } from '@angular/http';
import { Subject } from 'rxjs/Rx';

@Injectable()
export class ProgressService {
    progressEventObservable: Subject<any> = new Subject();
    progressEvent$ = this.progressEventObservable.asObservable();
}


@Injectable()
export class CustomBrowserXhr extends BrowserXhr {

constructor(private service: ProgressService) { super(); }

    build(): any {
        let xhr = super.build();
        let startTime = Date.now();
        xhr.upload.onprogress = (event) => {
            let timeElapsed = Date.now() - startTime;
            let uploadSpeed = event.loaded / (timeElapsed / 1000);
            let timeRemaining = Math.ceil(((event.total - event.loaded) / uploadSpeed));

            event.uploadTimeRemaining = timeRemaining;
            event.uploadSpeed = (uploadSpeed / 1024 / 1024).toFixed(2);
            event.percentCompleted = ((event.loaded / event.total) * 100).toFixed(0);
            console.log(event, "event inside browser override");
            this.service.progressEventObservable.next(event);
        };
        return <any>(xhr);
    }
}

我将这两个服务添加到我的主模块中，正如您所描述的：

providers: [
    ProgressService,
    { provide: BrowserXhr, useClass: CustomBrowserXhr }
],
bootstrap: [ AppComponent ]

它按预期登录到控制台。 然后，在我上传文件的组件中，我不得不强制更改检测，但它可以正常工作：

constructor(
private cdr: ChangeDetectorRef,
private service: ProgressService
) { 
    this.service.progressEvent$.subscribe(event => {
        this.progress = event.percentCompleted;
        this.speed = event.uploadSpeed;
        this.timeRemaining = event.uploadTimeRemaining;
        this.cdr.detectChanges();
    });
}

我试图让它与异步管道一起工作，但它只在最后一个事件上更新。 你怎么认为？