Observable 订阅中的 Angular 重定向

Question

我使用 Angular 4 作为自定义组件，仅在一个页面上上传音频（它不是 SPA）。文件上传后，我想将浏览器重定向到页面http://website/profile/tracks。

我的服务调用如下所示：

this.uploadService.uploadTrack(this.trackForm, csrfToken).subscribe(res => {
  this.redirectToTracks();
  this.loading = false;
}, err => {
  this.loading = false;
});

上传服务：

uploadTrack(track, csrfToken): Observable<any> {
  const headers = new HttpHeaders().set('Csrf-Token', csrfToken);
  return this.http.post('/profile/upload', track,  {headers: headers});
}

和重定向功能：

redirectToTracks() {
  window.location.href = '/profile/tracks';
}

但它不起作用，似乎 Angular 将其称为后台请求：

如果我将 console.log(res) 放入 subscribe 中，它会记录重定向

但如果我只在 ngOnInit() 中添加重定向，它就可以正常工作！

Answer 1

解决方案是使用 NgZone：

constructor(private utilsService: UtilsService,
              private uploadService: UploadService,
              private zone: NgZone,
              ){ ... }

this.uploadService.uploadTrack(this.trackForm, csrfToken).subscribe(
    res => {
      this.loading = false;
      this.zone.runOutsideAngular(() => {
        window.location.href = '/profile/tracks';
      });
    }, 
    err => {
      this.loading = false;
    });
);