Обновление переменной изнутри подписки на события в Angular

Question

Я пытаюсь обновить переменную из подписки на событие. Переменные обновлены внутри, но не обновлены снаружи.

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { pairwise, filter } from 'rxjs/operators';

@Component({
  selector: 'elephant-component',
  templateUrl: './elephant.component.html',
})
export class ElephantComponent  {

routedFromTraining: boolean = false;

constructor(private router: Router) {
  this.router.events
   .pipe(filter(e => e instanceof NavigationEnd), pairwise())
   .subscribe((event) => {
     if (event[0]['url'] == '/trainings') {
       this.routedFromTraining = true;
       // this.routedFromTraining is true
     }
   });
  // this.routedFromTraining is false
 }
}

Answer 1

Потому что это АСИНХРОННАЯ ОПЕРАЦИЯ , и вы пытаетесь наблюдать изменение синхронно! Вы могли бы установить его как false изначально. Если вы хотите проверить, какое значение он получает от subscribe(), вам нужно будет проверить после того, как вызов subscribe() завершит завершение в асинхронном режиме. Так что сделайте это вместо:

this.router.events
   .pipe(filter(e => e instanceof NavigationEnd), pairwise())
   .subscribe((event) => {
     if (event[0]['url'] == '/trainings') {
       this.routedFromTraining = true;
       // this.routedFromTraining is true
     }
    }, 
    (er) => console.log(err),
    () => console.log(this.routedFromTraining)   // this is an asynchronous operation so correct output will be displayed here
   );
  // this.routedFromTraining is false
 }