Angular 5在兩個組件之間共享變量

Question

我要在兩個組件中聲明一個共享變量，並且希望這些組件具有共享值。 我想知道是否可以做到這一點。

A.html

...
<button (click)="sendInfo(a,b,c)" > </button>
...

B.html

...
<div *ngIf="showData" > {{loadData()}} </div> 
...

A.component.ts

...
showData = false;
sendInfo(a: string, b:string, c:string) {
//calling webservice
showData = true;
}
...

B.component.ts

...
showData = false;
//when button from A.html clicked
showData = true;

因此，在B.component.ts中，如果單擊A.html中的按鈕，我想將showData設置為true。

1. B.component.ts如何知道何時更改了A.component.ts？

2. 如何在兩個組件之間設置此共享變量？

Answer 1

如果要在兩個組件之間共享變量，請使用服務，並使用ReplaySubject觀察：

export class Service {
   sharedVariable$ = new ReplaySubject(1);
   updateValue(value) {
       this.sharedVariable$.next(value);
   }
}

在組件中注入服務：

class Component {
   constructor(public service: Service) {}
}

並在html中使用：

<span>{{service.sharedVariable$ | async}}</span>
<button (click)="service.updateValue(55)">set 55</button>

這比使用組件綁定和未來證明共享變量要好得多。