Recently, I came across the code for the angular material google map library, and most of it made sense to me. However, there is one section in particular that still puzzles me (found in map-event-manager.ts).
/** This method returns an observable that adds an event listener to the map when a user subscribes to it. */
getLazyEmitter<T>(name: string): Observable<T> {
const observable = new Observable<T>(observer => {
// If the target hasn't been initialized yet, cache the observer for later addition.
if (!this._target) {
this._pending.push({observable, observer});
return undefined;
}
const listener = this._target.addListener(name, (event: T) => {
this._ngZone.run(() => observer.next(event));
});
this._listeners.push(listener);
return () => listener.remove();
});
return observable;
}
/** Sets the current target for the manager to bind events to. */
setTarget(target: MapEventManagerTarget) {
if (target === this._target) {
return;
}
// Remove listeners from the previous target.
if (this._target) {
this._clearListeners();
this._pending = [];
}
this._target = target;
// Subscribe to the cached listeners before the map initializes.
this._pending.forEach(subscriber => subscriber.observable.subscribe(subscriber.observer));
this._pending = [];
}
This specific line still confuses me. I'm not sure how this connects or why it works like this. And where exactly does the part come in that makes it run inside ngZone?
this._pending.forEach(subscriber => subscriber.observable.subscribe(subscriber.observer));Regarding Zone:
this._ngZone.run(() => observer.next(event));