Как подписаться на переменную RxJS в Angular?

Question

[atmk]

Переменная myVar в Сервисе:
export class MyService {
myVar: Observable
constructor() { }
}

Подписка на переменную myVar в компоненте Comp1:
{{ var1 }}
var1 = 500;
ngOnInit() {
this.myService.myVar.subscribe(x => { if(x) {this.var1 = x} })
}

Меняю значение переменной myVar в компоненте Comp2
myFunc(){
this.myService.myVar = 1000;
}

Нужно чтобы менялась переменная var1 в компоненте Comp1 при изменении переменной myVar с компонента Comp2.
Она не меняется. Можно изменить только с использованием EventEmiter().
Как сделать без EventEmiter?

Answer 1

[Антон Швец]

my.service.ts

@Injectable({
    providedIn: 'root',
 })
 export class MyService {
  public myVar$ = new Subject();
 }

comp1.component.html
<div>{{ myService.myVar$ | async}}</div>
comp1.component.ts

export class Comp1Component {
  constructor(
    public myService: MyService
  ) {}
}

comp2.component.ts

export class Comp2Component {
  constructor(
    public myService: MyService
  ) {}
  myFunc(){
  this.myService.myVar$.next(1000);
  }
  
}

когда вы сабжекту делаете next вызываются все коллбеки подписчиков данного сабжекта. В том числе AsyncPipe в компоненте comp1. AsyncPipe запускает детектор изменений и выводит в шаблон значение обсервабла myService.myVar$ (любой сабджект является обсерваблом)

Comments

[atmk]

Антон, спасибо. Все работает

[Антон Швец]

atmk, отметить как решение

Answer 2

[Дмитрий Еремин]

короче надо посидеть и почитать про RxJS - https://rxjs-dev.firebaseapp.com/
а то вы так долго будете идти

у вас myVar иммет тип Observable
а потом вы его затираете и вписываете 1000 (number)

по правильному: myVar.next(1000)