Как я могу использовать один и тот же экземпляр углового сервиса между компонентами в разных окнах? - PullRequest
Новая
       6

Как я могу использовать один и тот же экземпляр углового сервиса между компонентами в разных окнах?

2 голосов
/ 29 июня 2019

У меня есть компонент mainComponent, который запрашивает услугу myService, чтобы http запросить обновление данных для объекта BehaviorSubject data.Как только запрос завершен, открывается новое окно с компонентом otherComponent, в котором будет отображаться некоторая информация из myService.data.

Однако otherComponent не получает новейшее значение из data - он получает то, что изначально установлено для data.

mainComponent.ts 

open() {
    this.myObs = this.myService
    .fetchObservable()
    .subscribe(() => {
        this.myService.data.subscribe(value => {
            console.log(value) //logs "new data"                
        });
        this.nativeWindow.open('workflow-editor'); //occurs after data has been updated
    })

myService.ts 

public data: BehaviorSubject<string> = new BehaviorSubject<string>("old data");
    fetchObservable(){
        return this.http.get('./url')
        .pipe(
            map(res => {
                this.data.next("new data");
                console.log(this.data.value) //console.logs "new data"
                return res;
            })
        )
    }

otherComponent.ts 

ngOnInit(){
        this.myService.data.subscribe(value => {
            console.log(value) //console.logs "old data"
        });

Эта проблема возникает только при загрузкеotherComponent в новом окне.Когда я загружаю компонент в том же окне, он правильно записывает "new data".Я подозреваю, что это потому, что новое окно загружает новую версию приложения, создавая, таким образом, новый экземпляр myService - тот, у которого не обновлено значение data.

Есть ли способ обойти это?Могу ли я использовать один и тот же экземпляр службы в двух окнах?

1 Ответ

2 голосов
/ 29 июня 2019

Звучит как работа для localStorage

Написать сервис, который может обновлять локальное хранилище, а также получать значения. Нечто похожее на приведенный ниже фрагмент. 

import { Injectable } from '@angular/core';

@Injectable()
export class LocalStorageService {

  constructor() { }

  setLocalStorage(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getLocalStorage(key) {
    return JSON.parse(localStorage.getItem(key));
  };
}

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

Демонстрация стека Blitz

Ссылка: Хранение данных в окнах

...