angular2 - 在observable完成后导航

Question

我有这样的http观察,在我的UserService:

logout() {
    return this.http.delete(this.baseUrl + url, {
          headers: this.headers()
        }).map((res: IResponse) => {
          var json = res.json();
          json.headers = res.headers;
          return json;
        }).subscribe((response) => {
          //DO SOMETHING, THEN ----
          return res;
        });
}

我创建了一个observable,并创建了一个subscription(response),它是返回的成功值.

现在,在我的组件中,我想打电话UserService.logout(),然后导航到一个新的路线:

logout() {
    this.userService.logout();
    this.router.navigate(['LandingPage']);
  }

显然,这可能是异步发生的,我可能会在我退出之前导航.

使用promises,我可以做这样的事情:

this.userService.logout().then(() => { this.router.navigate(['LandingPage']); });

我怎么能用observable做同样的事情？在我的UserService课堂上,我想创建一个observable,订阅它,在成功或出错时做一些事情,然后从我的视图组件导航.

Answer 1

你实际上可以让logout方法返回一个promise并正常使用它.它不一定是可观察的:

logout() {
    return new Promise((resolve, reject) => {
        this.http.delete(this.baseUrl + url, { headers: this.headers() })
            .map((res: IResponse) => {
              var json = res.json();
              json.headers = res.headers;
              return json;
            })
            .subscribe(data => {
              //DO SOMETHING, THEN ----
              resolve(data);
            }, error => reject(error));
    });
}

logout() {
  this.userService.logout().then(response => this.router.navigate(['LandingPage']))
}

Answer 2

Observable对象最后有方法,试试吧.不要忘记先导入:

import 'rxjs/operators/finally';

你的logout()将是:

 logout() {
  return this.http.delete(this.baseUrl + url, { headers: this.headers() })
    .map(res => res.json())
    .finally(() => this.router.navigate(['LandingPage']))
    .subscribe((response) => {
      //DO SOMETHING, THEN ----

    });
  }

如果你真的想要使用诺言:

import 'rxjs/add/operator/toPromise';

logout() {
  return this.http.delete(this.baseUrl + url, { headers: this.headers() })
    .map(res => res.json());

在component.ts中

var aPromise = this.userService.logout().toPromise();
aPromise.then(() => {
    this.router.navigate(['LandingPage']);
});