각도 2로 params 및 queryParams를 검색하는 모범 사례

Question

URL 매개 변수에 대한 정보가있는 경로를 만드는 방법을 이해하려고합니다. 당신이 볼 수 있듯이, 나 또한 쿼리를했습니다

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

: 나는 경로로 이동하는 방법

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

이는 다음과 같습니다

이

내 경로 (app.routes.ts)입니다 매개 변수. 궁금한데, 내 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,이 매개 변수를 전달하고 싶다.

Answer 1

무엇 forkJoin 사용에 대한 (내 머리의 상단에서) 테스트하지?

ForkJoin을 사용하면 두 개의 관찰 가능 항목을 결합하고 두 가지 관찰 항목 모두의 응답을 기다릴 수 있습니다. 설명서 here을보고 자세한 내용은 here을 참조하십시오.

코드에 관해서는 다음과 같이 보일 것이다 : 내 요구에 맞는 내가 최근이 딜레마에 직면 한

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

Answer 2

동시에 두 스냅 샷을 모두 액세스해야하는 경우 더 나은 옵션이라고 생각합니다.

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); 
     }); 
    }); 
    } 

Answer 3

및 최적의 솔루션 :

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); 
    }); 
    } 

당신은 수입을 추가해야 할 수도 있습니다 나는 Observable.merge을 사용하는 것으로 나타났습니다.

동일한 구성 요소 (예 : 필터로 검색)에서 params queryParams의 변경 사항을보고 싶다면 스냅 샷을 사용하면 좋지 않습니다.

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() 
); 

Answer 4

Observable.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; 
    });