Angular (9) 组件间共用state

Question

In current (2020) Angular, I have two components that are intended to share the state of activeProject through a service. I have the following defined on an ApplicationProjectService :

private activeProjectSource = new BehaviorSubject(undefined);
activeProject$ = this.activeProjectSource.asObservable();

set activeProject(v: any) {
  this.activeProjectSource.next(v);
}

get activeProject() {
  return this.activeProjectSource.value;
}

I'm using BehaviorSubject in the service since I want components to get the current value upon subscribing without any change. The getter/setter is there because I was doing some other binding directly to a service property, which I've since learned is not recommended.

The two sibling components that eventually trace back to a common parent, but I'm not using @Input() or @Output() or any parameter passing in the DOM:

this.appProjectService.activeProject$.subscribe(activeProject => {
  this.activeProject = activeProject;
});

Each component is binding to the this.activeProject property in their respective component using [(ngModel)] :

<input type="checkbox" [(ngModel)]="activeProject.someProperty">

Question

If each component obtained what I thought was a copy of activeProject through this.appProjectService.activeProject$.subscribe() , how is it working that a change to the local property in one component is reflected in the other? In the end this is the behavior I want, but I can't understand why it works. Is there some passing by reference that I'm not understanding in rxjs observables?

Answer 1

sIf you have 2 components, the both local variables activeProject use the same reference of activeProject . ngModel is bound to a property of this reference. So it's working, because a change in a component only update the property of the reference, and does not change the reference. You can even use a variable activeProject without wrapping it in a BehaviorSubject .

Answer 2

I know this should be in comment but this much of letters comment won't accept.

Forget about RxJS for a while.

Now you have getter and setter for your property.

You set activeProjectValue in your service.

Now when you subscribe it in one component, you will get the object which will be passed by reference. Same for the other component. As both components accessing same object they are passed by reference.

If you have to break the reference, to use it differently.

Also each component obtained what I thought was a copy of activeProject .... this means they copy by refenrence of object.

I know, you know how to break reference, but this is just for sake for future viewers

To break the reference of object you can use JSON.parse(JSON.stringify(*ObjectName*)

In your example

this.appProjectService.activeProject$.subscribe(activeProject => {
   this.activeProject = JSON.parse(JSON.stringify(activeProject));
});