Angular (9) 組件間共用state

Question

在當前 (2020) Angular 中，我有兩個組件旨在通過服務共享 activeProject 的activeProject 。 我在ApplicationProjectService上定義了以下內容：

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

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

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

我在服務中使用BehaviorSubject因為我希望組件在訂閱時獲得當前值而不做任何更改。 getter/setter 在那里是因為我直接對服務屬性進行了一些其他綁定，從那以后我不推薦使用它。

最終追溯到共同父級的兩個兄弟組件，但我沒有使用@Input()或@Output()或在 DOM 中傳遞的任何參數：

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

每個組件都使用[(ngModel)]綁定到各自組件中的this.activeProject屬性：

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

問題

如果每個組件都通過this.appProjectService.activeProject$.subscribe()獲得了我認為是activeProject的副本，那么一個組件中本地屬性的更改會反映在另一個組件中是如何工作的？ 最后這是我想要的行為，但我不明白為什么它會起作用。 在 rxjs observables 中是否有一些我不理解的引用傳遞？

Answer 1

s如果您有 2 個組件，則兩個局部變量activeProject使用相同的activeProject引用。 ngModel綁定到此引用的屬性。 所以它起作用了，因為組件中的更改只會更新引用的屬性，而不會更改引用。 您甚至可以使用變量activeProject而不將其包裝在BehaviorSubject中。

Answer 2

我知道這應該在評論中，但這么多的信件評論不會接受。

暫時忘記RxJS 。

現在你的屬性有了getter和setter 。

您在服務中設置activeProjectValue 。

現在，當您在一個組件中訂閱它時，您將獲得object ，它將通過引用傳遞。 其他組件也一樣。 作為訪問相同 object 的兩個組件，它們通過引用傳遞。

如果你必須打破參考，以不同的方式使用它。

此外each component obtained what I thought was a copy of activeProject副本 .... 這意味着它們通過引用 object 進行復制。

我知道，你知道如何打破參考，但這只是為了未來的觀眾

要打破 object 的引用，您可以使用JSON.parse(JSON.stringify(*ObjectName*)

在你的例子中

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