我正在测试全新发布的Angular 17与通用SSR和非 destruct 性水化,我注意到一个奇怪的行为.

在我的测试组件中,通过async pipe Observable发出了GET和POST请求.

get()个可观察消费者仅在服务器端触发HTTP请求(在我的浏览器网络选项卡中没有对此请求的XHR调用).在我看来,这似乎是所需的行为,因为Express服务器已经用数据填充了请求的页面)

post()个可观察的消费者在两端触发HTTP请求.响应已经在从Express生成的HTML中,但是POST请求被客户端第二次触发(我在我的浏览器网络选项卡中看到它).

我在这里错过了什么?

Here is a repro repo

以下是我的代码片段:

export class AppComponent {

  getReq$: Observable<any>;
  postReq$: Observable<any>;

  constructor(
    private http: HttpClient,
  ) {
    this.getReq$ = this.get();
    this.postReq$ = this.post();
  }

  get(): Observable<HttpResponse<any>> {
    return this.http.get<any>(
      'https://dummyjson.com/products/1'
      , {});
  }

  post(): Observable<HttpResponse<any>> {
    return this.http.post<any>(
      'https://dummyjson.com/products/add'
      , {})
  }
}
<div *ngIf="getReq$ | async as resp">
    <b>get request response</b>
    {{resp | json}}
</div>

<div *ngIf="postReq$ | async as resp">
    <b>post request response</b>
    {{resp | json}}
</div>

推荐答案

这是由于HttpTransferCache默认选项造成的.

如果您还想缓存POST请求,则需要在设置消隐功能时专门启用它:

provideClientHydration([
  withHttpTransferCacheOptions({includePostRequests: true})
])

这也可以在请求的基础上进行:

HttpRequest具有transferCache属性,如果将POST请求的该属性设置为true,则会对其进行缓存!

Angular相关问答推荐

将Angular Metal的芯片组件集成到我的表单中时出错

Angular material 输入字段中的图标未显示

angular 17:app.config. server.ts中的mergeApplicationconfig导致初始化在app.config. ts中导入的提供程序

间歇性不正确的SSR重定向(server. ts级别的请求和响应不匹配)

try 测试具有Angular material 下拉列表的组件时,在Angular 17中发现&q;错误的意外合成属性@TransitionMessages

带逻辑的组件decorator 中的Angular 主机侦听器属性

带输入的单位测试Angular 分量.需要

在Angular 17的本地服务应用程序时禁用SSR

react 形式之间的循环关系

使用 Angular 类构造函数来获取依赖项

Angular 信号 在 effect() 中使用 debounce

有没有办法订阅部分 BehaviorSubject 值的变化?

如何在 Angular 中创建通用的可重用组件

console.log 返回 api 数据但 ERROR TypeError: Cannot read properties of undefined reading 'name'

当访问令牌在 MSAL for Angular 中过期时如何重定向用户?

如何在 Angular 5 HttpInterceptor 中添加多个标头

什么是 Angular 4,我可以从哪里了解更多信息?

Angular 4中的md-select中的onselected事件

如何在项目中导入 Angular material?

ng-template 上的 *ngFor 不输出任何内容