Angular 用于HTTP请求的ng2 slim加载条_Angular_Typescript

Angular 用于HTTP请求的ng2 slim加载条

angular typescript

Angular 用于HTTP请求的ng2 slim加载条,angular,typescript,Angular,Typescript,当从后端收到请求时，我需要使用ng2 slim加载条来显示我的进度这是我的组件 ngOnInit(){ this._slimLoader.start(); this._productsAdminService.getProducts() .subscribe(products => { products.forEach(function(product){ if

当从后端收到请求时，我需要使用ng2 slim加载条来显示我的进度

这是我的组件

ngOnInit(){
        this._slimLoader.start();
        this._productsAdminService.getProducts()
            .subscribe(products => {
                products.forEach(function(product){
                    if(product.cat_id === 1) product.catName = 'Dota Shirts';
                    if(product.cat_id === 2) product.catName = 'Gym Shirts';
                    if(product.cat_id === 3) product.catName = 'Car Shirts';
                });
                this.products = products;
                console.log(this.products);
                this._slimLoader.complete();
            },
            err => console.log(err));
    }

这个请求应该需要3-5秒才能解决，所以我需要让进度条像那样加载。这里的问题是，当我加载页面时，在回调完成之前不会显示任何内容。在展示完我所有的产品后，它会立即展示，然后消失

这里有什么问题吗？请帮忙。

我过去也有过同样的问题。当您使用

这个时。_slimLoader.start（）它从0%开始加载条形图，并缓慢增加。这意味着您无法从视觉上看到它的启动，因为它位于浏览器的边缘
您可以将进度设置为某个百分比，而不是使用.start（）
，例如this.\u slimLoader.progress=70
然后调用.complete（）一旦请求完成
我相信YouTube使用了这种风格。
我过去也遇到过同样的问题。当您使用这个时。_slimLoader.start（）它从0%开始加载条形图，并缓慢增加。这意味着您无法从视觉上看到它的启动，因为它位于浏览器的边缘
您可以将进度设置为某个百分比，而不是使用.start（）
，例如this.\u slimLoader.progress=70
然后调用.complete（）一旦请求完成
我相信YouTube就是采用这种风格的。
正如托多的回答所提到的，该条从0%开始。您需要将其设置为20%，然后调用start（）
。但是，start（）
只是在某个时间间隔内递增，当它达到100%时，该条就会消失，错误地指示加载已完成。如果start（）
接受在每个步骤上调用的回调，这样您就可以在90%时停止它，那就太好了。但事实并非如此
下面是我在我们的项目（Red Hat Automated Migration Toolkit）中所做的工作：

在HTTP服务包装器（处理OAuth）中，我们触发一个事件
然后由我们的加载指示器服务捕获

加载指示器服务

包装SlimLoaderBarService
并跟踪有多少HTTP请求正在进行
然后计算百分比，并将其置于20%到90%的范围内
当所有HTTP请求完成后，它将保持90%大约一秒钟，然后调用complete（）


如果您对每个导航步骤有多个请求，这看起来很自然，并提供了良好的用户体验。
如果您通常只有一个请求，那么您可能需要调整基于CSS的动画（使其更长），或者使用start（）
毕竟
以下是一些关键代码部分：
@Injectable()
export class LoadingIndicatorService {

    constructor(
        private _slimBarService: SlimLoadingBarService,
        private _eventBusService: EventBusService,
    ) {
        // Register the LoadingSomething event listeners.
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingStartedEvent))
            .subscribe((event: LoadingSomethingStartedEvent) => this.loadingStarted() )
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingFinishedEvent))
            .subscribe((event: LoadingSomethingFinishedEvent) => this.loadingFinished() )
    }

    public getSlimService(){
        return this._slimBarService;
    }


    private counter: number = 0;
    private max: number = void 0;

    private reset() {
        this.counter = 0;
        this.max = void 0;
    }

    public loadingStarted(){
        this.counter++;
        this.max = this.counter;
        this.updateProgress();
    }

    public loadingFinished(){
        this.counter--;
        this.updateProgress();
    }

    private updateProgress() {
        if (this.counter == 0) {
            this._slimBarService.height = "2px";
            this._slimBarService.visible = true;
            this._slimBarService.progress = 95;
            this.max = void 0;
            Observable.timer(700).subscribe(() => {
                this._slimBarService.complete();
            });
        }
        else {
            // max - counter = finished.
            // If the things to load are added after something loaded, the progress would go back.
            // But let's rely on that loading will start fast at the beginning.
            // Start at 20, jump to 90.
            let percent = 20 + 70 * (1 - (this.max - this.counter) / this.max);
            this._slimBarService.height = "3px";
            this._slimBarService.color = "#39a5dc";
            this._slimBarService.visible = true;
            this._slimBarService.progress = percent;
        }
    }

}


    let responseObservable2 = responseObservable.do(
        () => console.log("Request SUCCEEDED"),
        () => console.log("Request FAILED"),
        () => {
            console.log("Request FINISHED");
            if (this._eventBus) {
                console.log("Request FINISHED, firing");
                this._eventBus.fireEvent(new LoadingSomethingFinishedEvent(responseObservable))
            }
        }
    );

HTTP服务包装器：
@Injectable()
export class WindupHttpService extends Http {

    private configureRequest(method: RequestMethod, f: Function, url: string | Request, options: RequestOptionsArgs = {}, body?: any): Observable<Response> {
        let responseObservable: Observable<Response> = ...

    ...

    console.log("Load STARTED");
    if (this._eventBus)
        console.log("Load STARTED, firing");
    this._eventBus.fireEvent(new LoadingSomethingStartedEvent(responseObservable));

    return responseObservable2;
}

@Injectable（）
导出类WindupHttpService扩展了Http{
私有配置请求（方法：RequestMethod，f:Function，url:string | Request，选项：RequestOptionsArgs={}，body？：any）：可观察{
让responseObservable:Observable=。。。
...
log（“加载已启动”）；
如果（本.\u事件总线）
日志（“加载启动，启动”）；
此._eventBus.firefevent（新加载SomethingstartedEvent（responseObservable））；
返回响应可观测2；
}

要获得完整的代码，请在github.com上搜索project Windup。
正如todo的回答所提到的，该条从0%开始。您需要将其设置为20%，然后调用start（）
。但是，start（）
只是在某个时间间隔内递增，当它达到100%时，该条就会消失，错误地指示加载已完成。如果start（）
接受在每个步骤上调用的回调，这样您就可以在90%时停止加载，这将是一件好事。但事实并非如此
下面是我在我们的项目（Red Hat Automated Migration Toolkit）中所做的工作：

在HTTP服务包装器（处理OAuth）中，我们触发一个事件
然后由我们的加载指示器服务捕获

加载指示器服务

包装SlimLoaderBarService
并跟踪有多少HTTP请求正在进行
然后计算百分比，并将其置于20%到90%的范围内
当所有HTTP请求完成后，它将保持90%大约一秒钟，然后调用complete（）


如果您对每个导航步骤有多个请求，这看起来很自然，并提供了良好的用户体验。
如果您通常只有一个请求，那么您可能需要调整基于CSS的动画（使其更长），或者使用start（）
毕竟
以下是一些关键代码部分：
@Injectable()
export class LoadingIndicatorService {

    constructor(
        private _slimBarService: SlimLoadingBarService,
        private _eventBusService: EventBusService,
    ) {
        // Register the LoadingSomething event listeners.
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingStartedEvent))
            .subscribe((event: LoadingSomethingStartedEvent) => this.loadingStarted() )
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingFinishedEvent))
            .subscribe((event: LoadingSomethingFinishedEvent) => this.loadingFinished() )
    }

    public getSlimService(){
        return this._slimBarService;
    }


    private counter: number = 0;
    private max: number = void 0;

    private reset() {
        this.counter = 0;
        this.max = void 0;
    }

    public loadingStarted(){
        this.counter++;
        this.max = this.counter;
        this.updateProgress();
    }

    public loadingFinished(){
        this.counter--;
        this.updateProgress();
    }

    private updateProgress() {
        if (this.counter == 0) {
            this._slimBarService.height = "2px";
            this._slimBarService.visible = true;
            this._slimBarService.progress = 95;
            this.max = void 0;
            Observable.timer(700).subscribe(() => {
                this._slimBarService.complete();
            });
        }
        else {
            // max - counter = finished.
            // If the things to load are added after something loaded, the progress would go back.
            // But let's rely on that loading will start fast at the beginning.
            // Start at 20, jump to 90.
            let percent = 20 + 70 * (1 - (this.max - this.counter) / this.max);
            this._slimBarService.height = "3px";
            this._slimBarService.color = "#39a5dc";
            this._slimBarService.visible = true;
            this._slimBarService.progress = percent;
        }
    }

}


    let responseObservable2 = responseObservable.do(
        () => console.log("Request SUCCEEDED"),
        () => console.log("Request FAILED"),
        () => {
            console.log("Request FINISHED");
            if (this._eventBus) {
                console.log("Request FINISHED, firing");
                this._eventBus.fireEvent(new LoadingSomethingFinishedEvent(responseObservable))
            }
        }
    );

HTTP服务包装器：
@Injectable()
export class WindupHttpService extends Http {

    private configureRequest(method: RequestMethod, f: Function, url: string | Request, options: RequestOptionsArgs = {}, body?: any): Observable<Response> {
        let responseObservable: Observable<Response> = ...

    ...

    console.log("Load STARTED");
    if (this._eventBus)
        console.log("Load STARTED, firing");
    this._eventBus.fireEvent(new LoadingSomethingStartedEvent(responseObservable));

    return responseObservable2;
}

@Injectable（）
导出类WindupHttpService扩展了Http{
私有配置请求（方法：RequestMethod，f:Function，url:string | Request，选项：RequestOptionsArgs={}，body？：any）：可观察{
让responseObservable:Observable=。。。
...
log（“加载已启动”）；
如果（本.\u事件总线）
日志（“加载启动，启动”）；
此._eventBus.firefevent（新加载SomethingstartedEvent（responseObservable））；
返回响应可观测2；
}

有关完整的代码，请在github.com上搜索项目结束