Within my current project, there exists a series of dependencies. Specifically, there is a shared service class containing an object named "myObject" which many components access and modify. The issue at hand is that each component is independently modifying the values of "myObject" and saving these changes to the server.
A recent requirement has surfaced to centralize the saving process. The goal is for a centralized mechanism to automatically save the values of "SharedService.myObject" whenever they are altered.
export class SharedService {
myObject: MyClass;
}
// This interface is generated by an API
export interface MyClass {
id?: number;
someArray?: Array<SomeOtherInterface>;
someOtherObject: SomeOtherInterface;
}
I attempted a solution using getters and setters, but it seems the setter is not triggered when the values of "myObject" change.
export class SharedService {
_myObject: MyClass;
get myObject() {
console.log('tracking changes' + JSON.stringify(this._myObject));
}
// Setter is not being called upon any change in myObject
set myObject(myObject: MyClass) {
console.log('Values changed pre -> ' + JSON.stringify(this._myObject));
console.log('Values changed new -> ' + JSON.stringify(this.myObject));
}
}
I am seeking a solution to track changes within the SharedService itself, without needing to modify all existing components. Is there a way to achieve this?