Encountering a peculiar issue with Angular 5 and TypeScript, my problem may not be accurately reflected in the title.
Initially, I had this working code:
Calendar Service
_$dateChange: EventEmitter<object>;
constructor() {
this._$dateChange = new EventEmitter<object>();
}
get $dateChange() {
return this._$dateChange;
}
public calendarChanged(): void {
this._$dateChange.emit({});
}
Parent
...
y = 2;
constructor() {
this.calendarService.$dateChange.subscribe(item => {
this.load();
})
}
abstract load();
EventsComponent
export class EventsComponent extends ParentComponent {
x = 0;
load() {
console.log(this.x, this.y); // outputs 0 2
}
}
After reading this answer, I realized that I needed to utilize ReplaySubject. Moreover, I identified an issue with EventEmitter elsewhere.
Subsequently, I made some modifications to the code by swapping EventEmitter with ReplaySubject and emit with next. The updated code only affects the calendar service:
Calendar Service
_$dateChange: ReplaySubject<object>;
constructor() {
this._$dateChange = new ReplaySubject<object>();
}
get $dateChange() {
return this._$dateChange;
}
public calendarChanged(): void {
this._$dateChange.next({});
}
However, upon checking the console.log result, it displayed undefined 2! Attempting to use this.load().bind(this) or arrow functions like load = () => {} didn't resolve the issue, rather the latter resulted in an error stating that the function load doesn't exist.
Unable to pinpoint the root cause of the problem, my suspicion lies on ReplaySubject.