Лучшая практика получения параметров и queryParams в Angular 2

Я пытаюсь понять способ создания маршрута, с информацией в Параметры URL.

это мой маршрут (приложение.маршруты.ts):

{path: 'results/:id', component: MyResultsComponent},

вот как я ориентируюсь на маршрут:

goToResultsPage(query: string) {
this.router.navigate(['results', query], { queryParams: { pageSize: 20 } });}

как вы можете видеть, у меня также есть параметр запроса. Мне было интересно, какой лучший и самый чистый способ получить это в моем MyResultsComponent. Сейчас я вроде вложенного subscribe структура:

ngOnInit() {
    this.route
      .params
      .subscribe(params => {
        this.query = params['id'];
        this.route
          .queryParams
          .subscribe(queryParams => {
            this.offset = queryParams['pageSize'];
            #find entries this.entryService.findEntries(this.query, this.pageSize);
      });
    });
  }

после этого я хочу передать это параметры в EntryService, который возвращает записи.

12
angular angular2-routing typescript

4 ответов

Как насчет использования forkJoin?

ForkJoin позволяет вам присоединиться к двум наблюдаемым и ждать ответа от обоих. Вы можете посмотреть документацию здесь подробнее о здесь.

как в коде это будет выглядеть примерно так:

ngOnInit() {
    Observable.forkJoin(this.route.params, this.route.queryParams).subscribe(bothParams => {
        // bothParams is an array, on the first index we have the router.params 
        // on the second index we have the queryParams
        this.query = bothParams[0].query;
        this.pageSize = bothParams[0].pageSize;
        this.entryService.findEntries(this.query, this.pageSize);
    });
  }

вам может потребоваться добавить импорт:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
2

Наблюдаемой.combineLatest-это решение в этой ситуации, не так ли?

Observable
  .combineLatest(
    this.route.params,
    this.route.queryParams,
    (params: any, queryParams: any) => {
      return {
        id: +params.id,
        pageSize: queryParams.pageSize ? +queryParams.pageSize: null
      }
    })
  .subscribe(bothParams => {
    this.id = bothParams.id;
    this.pageSize = bothParams.pageSize;
  });
12

Я думаю, если вам нужно получить доступ к обоим одновременно, снимок является лучшим вариантом.

не проверено (только с верхней части головы) 

ngOnInit() {
    this.route
      .params
      .subscribe(params => {
        this.query = params['id'];
        this.offset = this.route.snapshot.queryParams['pageSize'];
        # find entries this.entryService.findEntries(this.query, this.pageSize);
      });
    });
  }
3

недавно я столкнулся с этой дилеммой, и лучшее решение, соответствующее моим потребностям, которое я нашел, - использовать Observable.merge.

использование моментального снимка не очень хорошо, если вы хотите наблюдать изменения из параметров queryParams в том же компоненте (i.e поиск с помощью фильтров).

Observable.forkJoin имеет ограничение, что оба наблюдаемых должны быть вызваны для работы, поэтому, если у вас есть сценарий, в котором могут быть изменения в params или в queryParams, но не обязательно в обоих, forkJoin не будет Нер вы.

Observable.merge С другой стороны, срабатывает при срабатывании любого из них. Конечно, это также имеет некоторые недостатки, так как у вас могут быть два обратных вызова, вызываемых один за другим (в начале с params и queryParams).

вот пример:

Observable.merge(
  this.route.params.map(params => this.handleParams(params)),
  this.route.queryParams.map(queryParams => this.handleQueryParams(queryParams))
)
.subscribe(
  () => this.onParamsOrQueryParamsChange()
);
1