угловые поведенческие предметы и подписка в компоненте

Question

У меня есть два независимых раскрывающихся списка в панели навигации. Скажем, один для класса, а другой для учителей. Теперь, в моем компоненте студента, я хочу подписать оба этих раскрывающихся значения, т.е. когда изменяется любое из раскрывающихся значений, компонент студента должен перезагрузиться и показать поведение в соответствии с выбором.

В моем компоненте я делаю:

export class Student{
    sub1: Subscription;
    sub2: Subscription;
    constructor(navbar: NavbarService){
        this.sub1 = this.navbar.teacher$.subscribe(
            method1();
        )
        this.sub2= this.navbar.class$.subscribe(
            method1();
        )
    }

    method1(){//implementation}
}

Это правильный подход? Могу ли я использовать одну ссылку, то есть только sub1, чтобы прослушать оба наблюдаемых изменения? Если вы можете объяснить своим примером, это будет очень ценно.

Answer 1

вам нужно будет создать новую общую службу, такую ​​как shared.service.ts, чтобы обмениваться данными между обоими компонентами, а затем импортировать BehaviorSubject в shared.service.ts

import { BehaviorSubject } from "rxjs";

создайте новую переменную Behavior Subject для изменения значений, а также другую, на которую ваши компоненты смогут подписаться в вашей общей службе.

value = new BehaviorSubject<any>(null);
_value = this.value.asObservable();

также добавить функцию для добавления следующего значения

nextValue(data) {
  this.value.next(data);
}

в вашем компоненте Teacher and Student импортируйте вашу общую службу и создайте переменную для хранения данных

import { SharedService } from '../services/shared.service'; // where you put your 
                                                            //services

sub1; // hold your data here

constructor(private shared: SharedService) {
  shared._value.subscribe(r => this.sub1 = r); // subscribe here
}

и затем, если вы хотите изменить значение, просто используйте

method( newValue ) {
  this.shared.nextValue(newValue);
}

и он должен обновляться как в компоненте вашего учителя, так и ученика

Answer 2

Пожалуйста, используйте RXJS:

import { combineLatest } from 'rxjs';

export class YourClass{

   ... 

   public yourMethod()
   {
       combineLatest(teachers$, class$).subscribe((result) => {

          // do your stuff
       });
   }

}

Более подробную информацию вы можете найти здесь:

https://www.learnrxjs.io/operators/combination/combinelatest.html