2017-10-02 11 views
2

내가 저장된 URL 매개 변수를 가져 오는 동안 routerLink를로드하는 기본 구현이 어떤 모양인지 이해하려고합니다. 일반적으로, 나는 내 응용 프로그램에서 라우팅을 처리하는 방식이 관찰에 대한 구독을 통해, 즉 다음과 같습니다 :이 몸의 한 부분으로 API 호출 일부 필터 매개 변수를 전달하기 위해 나를 수각도 URLapp에서 라우터 링크를 통해 매개 변수

private onFilterProcessed(value: any, type: string, body, page) 
{ 
    if (type === 'zip') 
    { 
     this.processType('addresses.zip', value); 
    } if (type === 'location') 
    { 
     this.processType('addresses.city', value); 

    this.filtersService.getByCategory(
     page, this.pagesize, this.body) 
     .subscribe(resRecordsData => { 
      let data = resRecordsData.data; 
     }, 
     responseRecordsError => this.errorMsg = responseRecordsError); 
} 

POST 요청. 그러면 데이터를 반환하기 전에 사용자의 필터 선택이 전달 된 결과가 반환됩니다.

예상대로 작동합니다. 사용자가 이전에로드 된 구성 요소로 "뒤로"이동하면 이전 필터 선택이 API 호출로 전달되므로 "페이지"는 페이지/구성 요소에 마지막으로 있었던 것처럼 보입니다.

그러나 라우터 링크를 통해 구성 요소를로드하는 앱의 몇 가지 섹션도 있습니다. 나는이 특정 링크를 클릭 할 때마다, 그것은 URL을 쓸어 때문에,

<a routerLink="/customer-history" routerLinkActive="selected">Customer History</a> 

것은 지금 내가 URL에 필터 PARAMS을 가지고있다,이 혼자가 작동하지 않습니다 : 그들은 처음에이처럼 보였다 페이지 식별자 "customer-history"만으로 다시로드 할 수 있습니다. 왜냐하면 이것이 현재 내가 말하고있는 것이기 때문입니다.

예를 들어, 필터가 도시를 기반으로 결과를 필터링 할 수있는 사용자에 의해 사용 된, 경우 URL은 다음과 같습니다

http://localhost:4200/customer-history;locations=true;locations_place=Seattle 

그래서 문제는, 그들이라면 멀리 클릭하는 것입니다 다음 대신 해당 페이지의 필터링 된 데이터를 얻는는 routerLink 링크를 통해 해당 페이지/구성 요소에 반환, 대신이로드됩니다 :

http://localhost:4200/customer-history 

그래서 제 질문은로 그 URL PARAMS를 전달하는 방법에 관한 것입니다 routerLink의 일부입니다. 나는 바인딩 대괄호와 같은 무언가를 보일 것이다 가정

<a [routerLink]="['/customer-history', getParams()]" routerLinkActive="selected">Customer History</a> 

내가 내가 그 특정의 URL PARAMS (단지 필터 PARAMS 아니라 구성 요소/페이지 이름) 얻을 어떻게에 명확하지 않다 이런 식으로 바인딩을 통해 전달하십시오.

나는 각도는 getParams()에 전달하는 I는 다음과 같이 얻을 수 사용할 수 activatedRoute.snapshot을, 만드는 알고

getParams() 
{ 
    return this.activatedRoute.snapshot; 
} 

을하지만이 무엇이며 전체 URL뿐만 아니라 필터 PARAMS 부분을 반환합니다 나는 필요하다. 그러면 내가 필요한 URL의 일부를 어떻게 얻고 URL에 "고객 기록"을 추가하기 위해 여기에 전달합니까? 기본 구현에서 그 모양은 어떻게됩니까?

답변

1

템플릿에서 routerLink를 사용하는 대신 올바른 페이지/구성 요소를 확인하고 해당 페이지 및 모든 관련 URL 매개 변수를 구독하고 탐색하는 기능을 전달하는 것입니다.

이 작업을 수행하려면 내가보기에이 작업을 수행 :

<a (click)="goToCustomerHistory()">Customer History</a> 

그리고 구성 요소의 그 기능은 다음과 같습니다

goToCustomerHistory() 
{ 
    this.route.params.subscribe(
     (params: any) => { 
      this.page = params['page']; 
      this.locations = params['locations']; 
      this.locations_place = params['locations_place']; 
     } 
    ); 
    this.router.navigate(
     ['/customer-history', { 
      page: this.page, 
      locations = this.locations; 
      locations_place = this.locations_place; 
     }]); 
} 

그리고 물론

, 당신은 또한 라우터와 ActivatedRoute을 가져와야 생성자에 삽입합니다.

constructor(private router: Router, 
      private route: ActivatedRoute){}