Question

在我的Angular应用程序中，我路由到一个组件。在该组件内部，我想显示item$可观察对象。

现在，如果我的服务有缓存项目，请使用该项目，无论如何，请求后端的项目。因此，体验可能是暂时显示缓存项目，然后后端项目在加载后替换它。如果后端上不存在该项，则缓存的项将是唯一的发射值。如果不是，我们会显示未找到。

以下是我尝试执行此操作的方法：

  ngOnInit() {
    this.item$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.id = params.get('id'); // get the id
        if (this.service.item && this.id === this.service.item.id) {
          return of(this.service.item); // cached item
        }
        return of(null); // nothing cached
      }),
      merge(this.backend.getItem(this.id)) // get backend item
    );
  }

我的模板代码

<div *ngIf="item$ | async as item; else showNotFound">
  <p>{{ item.name }}</p>
  <!-- other props omitted -->
</div>
<ng-template #showNotFound>
  <p>Not found</p>
</ng-template>

但是，在switchMap之前合并并且无法获取该项目，因为尚未设置this.id。如果我在switchMap前移动合并，则switchMap无法获取参数。怎么办呢？

Answer 1

我能够这样做：

  ngOnInit() {
    this.item$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.id = params.get('id'); // get the id
        return this.backend.getItem(this.id).pipe(
          map(backendResult => {
            if (backendResult === undefined) {
              if (this.service.item && this.id === this.service.item.id) {
                return this.service.item; // cached item
              }
              return null; // nothing cached
            } else {
              return backendResult;
            }
          })
        );
      }),
    );
  }

Answer 2

我支持你想要写

ngOnInit() {
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        this.id = params.get('id'); // get the id
        if (this.service.item && this.id === this.service.item.id) {
          return of(this.service.item); // cached item
        }  
        //If not is cached
        return this.backend.getItem(this.id)
          //You can "cached" the value, here
          .pipe(tap((item)=>{this.service.item=item}
          ));
      })).subscribe((item)=>{this.item=item}); //DON'T forget subscribe
  }

switchMap然后合并不起作用

2 个答案: