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

Question

I have a Method in a Service which looks like this

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;

}

It returns an Observable<Anwendung> . In my component I just call this service Methode to make it available in the View

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

And consume it in a View with an async Pipe

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

It works if I navigate from another page to the page with the component which includes the observable. But if i call the route directly, or reload, the page crashes without a specific error. Does anybody know where the Problem, in directly calling that route, is?

Answer 1

I guess Angular tries to call getAnwendungByClientId in every change detection cycle, which in turn causes a new subscription to the Observable, which in turn creates a new change detection cycle. So you'll get an endless loop which probably crashes your browser.

Try calling getAnwendungByClientId in your component's ngOnInit and store the return Observable as a class property of the component. Then, subscribe to that class property in your template.

Something like:

private obs$: Observable<Anwendung>

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

In your template

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