Question

我尝试使用带有更多可重用组件的angular2来构建一个小应用程序。在这里，我想要一个 Loader服务，它会在每次 xhr 调用时执行。

为此，这就是我想出来的

使用承诺

export class SpinnerService {

    showSpinner = false;

    spinnerPromise(observableToWaitFor: Observable<any>, text?: string): Promise<any> {
        this.showSpinner = true;
        return promiseToWaitFor.toPromise()
            .then((data) => { this.showSpinner = false; return data; });
    }   

}

这就是我使用SpinnerService

的方式

    constructor(private requestService: RequestService, private spinnerService: SpinnerService) { }

    signin(username: string, password: string) {
        let url = _.template(API_Constant.LOGIN)({ username: username });
        return this.spinnerService.spinnerPromise(this.requestService
            .makeRequest(url, RequestMethod.Get))
            .then(data => {
                let peoples = data.results;
                let found = _.find(peoples, (p: any) => p.name.toLowerCase() === username.toLowerCase());
                if (found && found.birth_year === password) {

                } else {
                    return Promise.reject('Invalid username or password');
                }
            });
    }
}

它在某种程度上工作正常。但我对这种用法并不是很有信心，因为它限制 AuthService 使用 Promise 。

使用Observable

我是使用Observable的初学者，所以我不知道实施通用Loader服务有多么困难或容易。

这就是我试过的

@Injectable()
export class SpinnerService {

    showSpinner = false;
    public consumer: ReplaySubject<any> = new ReplaySubject(1);

    spinnerPromise(observableToWaitFor: Observable<any>, text?: string) {
        this.showSpinner = true;
        return observableToWaitFor.subscribe(
            response => this.consumer.next(response),
            error => { this.showSpinner = false; },
            () => { this.showSpinner = false; }
        );
    }

}

这会返回订阅。但有没有办法更新 showSpinner 而不订阅。

Answer 1

终于让它运转了......我必须做的唯一改变就是像这样使用[]

>>> for a,b,c in ["cat"]
        print(a,b,c)
c a t

Angular2：为xhr调用创建通用Loader服务

1 个答案: