使用Angular Observable重新加载页面时崩溃

Question

我在服务中有一个看起来像这样的方法

public getAnwendungZuClientId(clientId: string, nurBerechtigteAnwendungen: boolean = true): Observable<Anwendung> {
const anwObservable = this.prüfeObNurBerechtigt(nurBerechtigteAnwendungen);

let observableToReturn: Observable<Anwendung>;

observableToReturn = anwObservable
.pipe(
  map((anwendungen: Anwendung[]) => {
      return anwendungen
        .find(anwendung => {
            return anwendung.client_id === clientId
        })
      }
    ),
  first()
);

return observableToReturn;

}

它返回一个Observable<Anwendung>。 在我的组件中，我只是调用此服务Methode以使其在视图中可用

getAnwendungByClientId (anwendungId: string): Observable<Anwendung> {
    return this.anwendungService.getAnwendungZuClientId(anwendungId);
  }

并在带有异步管道的视图中使用它

{{ (getAnwendungByClientId(anwendung.clientId) | async).name }}

如果我从另一个页面导航到包含可观察组件的页面，它将起作用。 但是，如果我直接调用路由或重新加载，则页面会崩溃而不会出现特定错误。 有人知道直接调用该路由时问题在哪里吗？

Answer 1

我猜想Angular会在每个更改检测周期中尝试调用getAnwendungByClientId，这反过来又导致对Observable的新订阅，这又创建了一个新的更改检测周期。因此，您将得到一个无限循环，可能会导致浏览器崩溃。

尝试在组件的getAnwendungByClientId中调用ngOnInit，并将返回的Observable存储为组件的类属性。然后，在模板中订阅该class属性。

类似的东西：

private obs$: Observable<Anwendung>

ngOnInit() {
  // don't know where `anwendung` comes from but you need it here :)
  this.obs$ = getAnwendungByClientId(anwendung.clientId)
}

在您的模板中

{{ (obs$| async).name }}