Angular 4 - ссылка на «это» в наблюдаемой подписке, по-видимому, ссылается на старые данные

Question

У меня есть компонент EditItems, который используется для редактирования items. Внутри ngOnInit() я подписываюсь на наблюдаемую информацию, которая есть в моем dataService (центральном сервисе Angular для обработки всех моих вызовов данных).

Когда данные наблюдаемой изменяются, вызывается мой метод subscribe:

ngOnInit() {
      this.myItemsSubscription = this.dataService.myItemsChanged
      .subscribe(
        (items: any[]) => {
          let lastItem = items[items.length - 1];

          if(lastItem.label.trim() === this.itemsForm.controls.label.value.trim()){
            this.id = lastItem.id;

            // *reference to 'this.editMode' below is always 'false'
            if (this.editMode){
              // do something
            }
          }
        }
      )
}

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

Например, я устанавливаю значение this.editMode позже в ngOnInit, так что оно устанавливается на «true», если обнаружен маршрут с параметром id, однако в .subscribe выше оно все еще остается false (определенно нет ничего, что могло бы установить это обратно в false). Я убедился, что this определенно ссылается на мой компонент. Если я ссылаюсь this.editMode за пределами подписки на this.dataService.myItemsChanged, я получаю правильное значение true.

      this.route.params.subscribe((params: Params) => {
          this.editMode = false;

          if (Number(params['id']))
          {
            this.editMode = true;
          }
          this.initForm();
         }
      );
}

Итак, когда я перехожу к маршруту для элемента, для существующего «элемента», вышеуказанная подписка срабатывает, и this.editMode временно устанавливается на true, но false, когда 'this.editMode указывается внутри первого subscribe

Обновление

Свойства this относятся только к «старым» значениям, когда я создаю новый элемент (новые элементы также создаются с помощью компонента «EditItems»), а , а затем переходят на другой маршрут, затем вернитесь к моему предмету (с «id» на маршруте, чтобы сработало this.route.params.subscribe)

Вот соответствующие части моего DataService. Я объявляю myItemsChanged Субъект моей Наблюдаемой. myItemsChanged изменяется отдельной подпиской, которая прослушивает трансляцию SignalR от внутреннего интерфейса при изменении элементов (событие itemUpdated)

@Injectable()
export class DataService {

  myItemsChanged = new Subject<any[]>();

  //Listening for the 'itemUpdated' event broadcast by SignalR from the back end
  let onItemUpdated$ = new BroadcastEventListener<any>('itemUpdated');

  this.connection.listen(onItemUpdated$);
  onItemUpdated$.subscribe((item: any) => {
    let index = this.items.findIndex(x => x.id === item.id);
    if (index > -1) {
      this.myItemsChanged.next(this.items.slice());
    }
  });

Почему я вижу false для значения this.editMode внутри первой подписки?

Answer 1

Я не отписался от подписки, поэтому, когда я переходил на другой маршрут, а затем обратно на маршрут, содержащий мой компонент, в моей подписке была какая-то неправильная ссылка на компонент.

Этот вопрос о том, «когда отписаться», дает объяснение и ответ на вопрос, что стало причиной этой проблемы:

Angular / RxJs Когда мне следует отписаться от `Subscription`

При использовании угловой маршрутизации при переходе на другой маршрут вызывается метод ngOnDestroy(), и любые подписки в этом компоненте должны быть отписаны внутри этого метода, например:

ngOnDestroy() {
  this.myItemsSubscription.unsubscribe();
}

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