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

【问题标题】：Page Crash on reload with Angular Observable使用 Angular Observable 重新加载时页面崩溃
【发布时间】：2020-11-24 16:52:36
【问题描述】：

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

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 }}

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

【问题讨论】：

标签： angular google-chrome rxjs angular2-observables rxjs-observables

【解决方案1】：

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

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

类似：

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 }}

【讨论】：

谢谢，有帮助