为什么 shareReply() 方法没有按预期工作 - Angular 15答案

【问题标题】：Why shareReply() method is not working as expected - Angular 15为什么 shareReply() 方法没有按预期工作 - Angular 15
【发布时间】：2023-01-05 19:13:19
【问题描述】：

尝试在 3 个组件中使用相同的 API，为了避免重复的 HTTP 调用，我可以使用 shareReply() 来缓存响应并在任何我想从 RxJs 获得的地方使用它。所以我喜欢下面

api-service.ts

getUsers(): Observable<any> {
    let headers = new HttpHeaders();
    headers = headers.set('app-id', '63b691428f53f6370fc9eed6');
    return this.http.get(this.url, { headers }).pipe(
      map((resp) => {
        return resp;
      }),
      shareReplay()
    );
  }

test1-组件

data$!: Observable<any>;
  constructor(private api: ApiService) {}

  ngOnInit(): void {
    this.loadTest1Data();
  }

  loadTest1Data() {
    this.data$.subscribe({
      next: (response) => {
        console.log('Loading data for Component - 1', response);
      },
      error: (error) => {
        console.log('Error While Loading data for Component - 1', error);
      },
      complete: () => {
        console.log('Success');
      },
    });
  }

test2-component（test3-component 也使用相同的代码）

data$!: Observable<any>;
  constructor(private api: ApiService) {}

  ngOnInit(): void {
    this.loadTest2Data();
  }

  loadTest2Data() {
    this.data$.subscribe({
      next: (response) => {
        console.log('Loading data for Component - 2', response);
      },
      error: (error) => {
        console.log('Error While Loading data for Component - 2', error);
      },
      complete: () => {
        console.log('Success');
      },
    });
  }

我得到的错误复制HERE - Stackblitz

无法读取未定义的属性（读取“订阅”）

有人可以告诉我出了什么问题以及如何解决吗？或者还有其他替代方法吗？（抱歉，我不允许使用任何第三方状态管理工具）

提前感谢您的宝贵时间

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案1】：

您的测试组件未定义 data$，因此 this.data$.subscribe 与 undefined.subscribe 等效，因此出现错误。

对于你可以做的测试组件

@Input() data$: Observable<any> = of();

并通过

<app-test1 [data$]="data$"></app-test1>

请注意，这样做更常见

<app-test1 [data]="data$ | async"></app-test1>

以便组件直接接收数据，AsyncPipe 负责订阅和取消订阅。

【讨论】：