使用 Angular 可观察到的重新加载页面崩溃

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

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

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

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

Answer 1

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

尝试在组件的ngOnInit中调用getAnwendungByClientId并将返回的 Observable 存储为组件的 class 属性。 然后，订阅模板中的 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 }}