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