Angular 5在两个组件之间共享变量

记录器

我要在两个组件中声明一个共享变量,并且希望这些组件具有共享值。我想知道是否可以做到这一点。

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。

  1. B.component.ts如何知道何时更改了A.component.ts?

  2. 如何在两个组件之间设置此共享变量?

马丁·纳克

如果要在两个组件之间共享变量,请使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 5在两个组件之间共享函数和变量

Angular 2,在没有直接关系的两个组件之间共享对象

Angular在两个组件之间共享服务实例

Angular 2-两个同级组件之间的通信

Angular 5 primeng中列中的两个变量

在Angular 5中的两组同级组件之间共享数据

无法使用 Angular 服务在两个 Angular 4 组件之间传递数据

Angular 6使用两个共享模块:组件不是已知元素:

Angular组件上的两个ngcontent

在Angular 2中的两个组件(页面)之间传递值

如何在两个组件之间使用Angular7(角材料)拖放

如何在Angular 2中的两个组件之间传递数据

SortableJS Angular 2.0+ 绑定:在不同组件中的两个列表之间拖放

在两个angular 2组件打字稿文件之间传递值

Angular 2 (plus) 中两个兄弟组件之间的通信方式

在Angular 6中在组件和服务之间共享变量

在 Angular 中的多个组件之间共享常量变量

Angular 5:在组件之间(跨模块)共享数据的服务?

Angular2 RC5模块之间的共享组件

Angular组件之间的数据共享

Angular:在组件之间共享数据

在Angular组件之间共享数据

“Angular5”服务(rxjs/observable)两个组件渲染问题

如何在没有服务的情况下在两个组件之间共享共享变量

如何在angular的两个子组件之间进行通信?

在两个Lambda之间共享变量

Keycloak-如何禁用两个(Angular)客户端应用程序之间的共享会话?

我如何将两个表单转换为组件并添加组件以在 angular 5 中查看

如何开发angular7中在两个不同组件之间切换的选项卡?