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>

这比使用组件绑定和未来证明共享变量要好得多。