我要在两个组件中声明一个共享变量,并且希望这些组件具有共享值。我想知道是否可以做到这一点。
A.html
...
<button (click)="sendInfo(a,b,c)" > </button>
...
B.html
...
<div *ngIf="showData" > {{loadData()}} </div>
...
组件
...
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。
B.component.ts如何知道何时更改了A.component.ts?
如何在两个组件之间设置此共享变量?
如果要在两个组件之间共享变量,请使用service和observable,使用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>
这比使用组件绑定和未来证明来共享变量要好得多。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句