Angular 9 - подписка на сервис и события ActivationEnd роутер

Question

У меня проблемы с доступом к служебным данным в роутере ActivationEnd.

Мой TS:

export class ListConditionsComponent implements OnInit {
  conditions: Condition[];
  fCon: string[];

  constructor(private _service: ConditionService,
    private _router: Router,
    private _route: ActivatedRoute) { }

  ngOnInit():void {
    this._service.getConditions()
      .subscribe(data => this.conditions = data);

    this._router.events.subscribe(event => {
      if(event instanceof NavigationStart) {  
      }

      if(event instanceof ActivationEnd) {
        this.fCon = event.snapshot.queryParams["fCon"];        
        console.log("actiend fCon:" + this.fCon);
        console.log("actiend conditions:" + this.conditions);
      }
    });
  }
 }

Шаблон:

<ul>
    <li *ngFor="let condition of conditions; let i = index">
        <label>
            <input type="checkbox" value="{{ condition.Id }}" *ngIf="fCon == condition.Id" checked />
            <input type="checkbox" value="{{ condition.Id }}" *ngIf="fCon != condition.Id" />
            <span>{{ condition.Name }}</span>
        </label>
    </li>
</ul>

Мой шаблон заполняется без любая проблема. Но в TS файл console.log говорит: «Условия действия: неопределенные». Я могу без проблем прочитать переменную fCon, но только переменная условий отображается как неопределенная. Я не знаю, почему я не могу получить доступ к «условиям» в моем событии ActivationEnd.

Кто-нибудь знает, почему? Спасибо. Примечание: В случае, если вам интересно, почему я так обращаюсь к параметрам запроса, это делается в компоненте, который не загружается в [router-outlet], поэтому у меня нет доступа к традиционному способу доступа к параметрам запросов.

ПОСЛЕ НЕСКОЛЬКИХ ЧАСОВ БЛАГОСОСТОЯНИЯ Я НАШЕЛ ЭТО РАБОТАЕТ МНЕ что ваш код также будет полезен кому-то, поэтому я отмечаю ваш код как ответ

Answer 1

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

export class ListConditionsComponent implements OnInit {
  conditions: Condition[];
  fCon: string[];

  constructor(private _service: ConditionService,
    private _router: Router,
    private _route: ActivatedRoute) { }

  ngOnInit():void {
    // first, get the conditions from the service... 
    this._service.getConditions().pipe(
      // now save them to the "conditions" property
      tap(data => this.conditions = data),
      // now switch to a different observable
      concatMap(() => this._router.events)
    ).subscribe(events => {
      // subscribe will receive whatever the last observable in the chain is emitting
      if(event instanceof NavigationStart) {  
      }

      if(event instanceof ActivationEnd) {
        this.fCon = event.snapshot.queryParams["fCon"];        
        console.log("actiend fCon:" + this.fCon);
        console.log("actiend conditions:" + this.conditions);
      }
    });
  }
}

Наблюдаемые объекты объединяются в цепочки и обрабатываются в конвейере. В вашем случае вы хотите получить данные из службы, сохранить их в компоненте, а затем получить все события маршрутизатора.