Question

路由解析器的代码：

  resolve() {
    return this.myService.activeReleases$;
  }

以下是“ myService”中可观察的代码。我这里有2个流。 reloadData $是我用来重新加载数据的流。我添加了“ startWith（0）”，以便可观察对象在调用时开始发出。

private readonly reloadData$ = new Subject<void>();

    activeReleases$: Observable<ActiveRecords[]> = this.reloadData$
        .pipe(
          startWith(0),
          tap( () => console.log('Triggered reload')),
          switchMap( () => this.http.get(this.URL)
            .pipe(
              tap( () => console.log('Triggered getting records')),
              map((values: ActiveRecords[]) => {
                console.log('hi')
                return values;
              }),
              catchError(e => of(e)),
              ))
    );

    reloadData() {
        this.reloadData$.next();
    }

当我在浏览器中点击url时，我可以看到上面提到的日志语句，但是以某种方式路由无法解析，并且我看到一个空白页。但是，如果删除可观察到的“ this.reloadData $”，则它可以正常工作。无法弄清楚可能是什么问题。

如果stackblitz-https://stackblitz.com/edit/angular-ugvvrc

，我已经创建了一个肮脏的示例

如果您点击链接“转到测试页”，则不会发生任何事情。

希望对此有任何帮助！

Answer 1

您需要做的就是将take(1),添加到管道中。

此take运算符的作用是，在经过n次（在我们的情况下，这是第一个）之后，它完成了可观察的对象。

Forked Stackblitz

import { ..., take } from 'rxjs/operators';

activeReleases$: Observable<ActiveRecords[]> = this.reloadData$
        .pipe(
          startWith(0),
          take(1),
          tap( () => console.log('Triggered reload')),
          switchMap( () => this.http.get(this.URL)
            .pipe(
              tap( () => console.log('Triggered getting records')),
              map((values: ActiveRecords[]) => {
                console.log('hi')
                return values;
              }),
              catchError(e => of(e)),
              ))
    );

注意：我不知道为什么在您的情况下这是必须，但是它可以工作。（对我来说，这似乎像是一个角虫）

路由解析器不适用于Angular中的嵌套Observable

1 个答案: