С помощью Javascript вы можете ссылаться только на один элемент, используя ID. document.getElementById
и селектор jQuery $
вернут только первое соответствие элемента. Поэтому не имеет смысла использовать один и тот же идентификатор для нескольких элементов.
Используйте BehaviorSubject для userChangeSet. Он выдает значение сразу после подписки. Пример:
userChangeSet = new BehaviorSubject<any>(this.currentData);
То, что вы можете сделать в своем сервисе, - это использовать BehaviourSubject для хранения значений, но представить его как Observable.
Вот цитата из документов, подробно описывающая, что такое BehaviourSubject
Один из вариантов Subjects - это BehaviorSubject, который имеет понятие «текущее значение». Он хранит последнее значение, отправленное его потребителям, и всякий раз, когда новый Observer подписывается, он немедленно получает «текущее значение» от BehaviorSubject
blockquote>. См. здесь для получения дополнительной информации.
Сервисный код:
private _user$ = new BehaviourSubject<any>(null); // initially null constructor(private http: HttpClient, private router: Router) { this.userChangeSet.subscribe(val => this._user$.next(val)) } get user$ () { return this._user$.asObservable(); }
Тогда вы можете использовать его как обычно в вашем компоненте.
this.service.user$.subscribe(v => { // do stuff here })
Обратите внимание, что первое значение, которое получит компонент, будет нулевым, поскольку это начальное значение BehaviourSubject.
РЕДАКТИРОВАТЬ:
В компоненте
private _destroyed$ = new Subject(); public ngOnDestroy (): void { this._destroyed$.next(); this._destroyed$.complete(); }
А затем для подписки
this.service.user$.pipe( takeUntil(this._destroyed$) ).subscribe(v => { // do stuff here })
То, как это работает, заключается в том, что когда уничтоженный объект $ испускает, наблюдаемые, которые передали
takeUntil(this._destroyed$)
, будут отписываться от своих соответствующих источников.