Angular rxjs: задержка подписки до других наблюдаемых выбросов

Question

У меня есть 2 подписки - одна подписка на мой ActivatedRoute, а другая на ngrx Store.

  ngOnInit() {
    this.menuItems$ = this.store.select('menuItems');
    this.menuItems$.subscribe(data => {
      this.menuItems = data.menuItems;
    });
  }

  ngAfterViewInit() {
    this.fragmentSubscription = this.route.fragment.pipe(
      filter((fragment: string) => typeof fragment === 'string')
    ).subscribe((fragment: string) => {
      setTimeout(() => {
        const element: ElementRef = this.menuItems.find(menuItem => menuItem.link === fragment).element;
        if(element !== undefined) {
          element.nativeElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "center" });
        }
      });
    });
  }

Поскольку моя подписка ActivatedRoute (фрагмент) зависит от данных подписки моего магазина, я хочу отложить свою ActivatedRoute(фрагмент) подписка, пока мой Магазин не будет подписан в первый раз

Есть ли для этого какой-либо оператор rxjs?

Tnx

Answer 1

На основании вашего комментария ...

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

Вы ищете combineLatest, который ...

Когда какое-либо наблюдаемое излучает значение, испускает последнее полученное значение из каждого.

Итак, я предлагаю следующее:

import { Subscription, combineLatest } from 'rxjs';

// ...

mySubscription: Subscription;

ngOnInit() {
  this.mySubscription = combineLatest(
    this.store.select('menuItems'),
    this.route.fragment.pipe(
      filter((fragment: string) => typeof fragment === 'string')
    )
  // DON'T USE ANY, type your data...!
  ).subscribe((data: [any, any]) => {
    this.menuItems = data[0];
    const fragment = data[1]
    // do your thing...
  })
}

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

Answer 2

Не получайте ваши данные в init из магазина, если это возможно. Получить их из резольвера.

Конечно, вы можете получить их из хранилища в резольвере, а затем получить к ним доступ в функции init в качестве значения.

Более подробную информацию можно найти здесь https://angular.io/api/router/Resolve