Angular routing inside a http post Observable / subscribe

Question

我正在尝试将用户定向到httpClient.post请求response中的仪表板。 该页面导航“很好”（它显示在 url 栏上）但组件 DOM 的大多数元素未加载。

这是 service.ts 中的帖子：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

const baseUrl = 'https://my-api.com';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) { }

  postSomeData(data): Observable<any> {
    return this.httpClient.post(baseUrl + '/postSomeData', data)
  }

这就是我在组件中使用它的方式：

this.apiService.postSomeData(params)
            .subscribe(
              async response => {
                response = await response;
                if(response.response == 'success'){
                  // success logic

                }else{
                  // failure message
                }
              },
              error => {
                // error logic
              },
              () => {
                // window.top.location.href = "https://" + window.location.host;
                this.router.navigate(["/dashboard"]);
              });

当subscribe完成并且路由器导航到仪表板时，这是我得到的仪表板 DOM 的不完整加载：

如果我将导航（ this.router.navigate(["/dashboard"]); ）放在订阅之外的任何地方，或者我手动或以编程方式重新加载页面（ window.top.location.href = "https://" + window.location.host; ) 页面 (DOM) 加载得很好：

那么我如何在订阅中实现导航并拥有仪表板组件的完整 DOM 加载呢？ 显然，订阅中的complete function 对我不起作用。 在完整的 function 中注释掉整页重新加载（ window.top.location.href = "https://" + window.location.host; ）有效，但它不是 angular 方式。

Answer 1

subscribe返回的第一个响应在 HTTP 方法成功时执行，因此无需检查响应。

第二个响应在出错时执行。

因此，实际上您只需执行以下操作即可大大简化您的代码：

this.apiService.postSomeData(params)
            .subscribe(
              () => {
                // success logic, HTTP statuscode 20X
              },
              () => {
                // error logic, when a HTTP error has been thrown
              },
              () => {
                // executed when the HTTP function has been completed, doesn't matter whether success or error
                this.router.navigate(["/dashboard"]);
              });

我认为问题与async和if子句有关。 没有理由在那里使用async和if -clause。 这应该解决它。

您始终可以在代码中使用debugger来查看 function 何时执行。 如果您没有完全了解subscribe的哪一部分何时执行，我建议您多做几次。