Получение как данных о маршруте, так и запросов к параметру activRoute

Question

Я использую следующий код для извлечения data из activatedroute

this.router.events
        .filter(event => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map(route => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter(route => route.outlet === 'primary')
        .mergeMap(route => route.data)
        .subscribe(res => {
            this.publicRoute = res["publicRoute"] || false;                
        });

Я использую практически идентичный фрагмент для извлечения queryPrams по тому же маршруту.

this.router.events
        .filter(event => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map(route => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter(route => route.outlet === 'primary')
        .mergeMap(route => route.queryParams)
        .subscribe(res => {
            this.internaltoken= res["internaltoken"] || false;                
        });

Мне интересно посмотреть, есть ли способ использовать только один фрагмент, чтобы подписаться на оба.Мне известно о Observable.combineLatest, но я не могу понять, как вписаться в вышеуказанный конвейер.

Answer 1

Вы можете использовать этот подход:

const route$ = this.router.events
  .filter(event => event instanceof NavigationEnd)
  .mapTo(this.route)
  .map(route => {
    while (route.firstChild) route = route.firstChild
    return route
  })
  .filter(route => route.outlet === 'primary')

const latest$ = route$
  .switchMap(route => route.data)
  .combineLatest(route$.switchMap(route => route.queryParams))
  .subscribe(([data, queryParams]) => {
    /* ... */
  })

Пара вещей, чтобы заметить:

1. Я использую как можно больше.По сути, вы всегда идете по отфильтрованному маршруту и ​​оттуда получаете нужные данные.Так что нет ничего проще, чем сохранить этот поток маршрутов фильтра - route$ - для разделения переменной и повторно использовать ее во втором latest$ потоке, в частности combineLatest.
2. Вместо mergeMap, который я использовал switchMap, с помощью которого я проверяю только подписки на data и queryParams последнего маршрута.В этом случае может не потребоваться, но в целом я считаю его более подходящим.Я также использовал mapTo в строке 3, чтобы еще больше упростить ситуацию.

PS Если вы планируете обновление до Angular 6 в будущем, я предлагаю вам взглянуть на pipe оператор.