각도 응용 프로그램에서 RouterLink를 통해 동적 URL 매개 변수 처리

Question

내 각도 2 응용 프로그램에는 사용자가 독립적이지만 상황에 따라 관련 구성 요소 그룹에서 선택할 수있는 탭 영역이 있습니다. 이것은 잘 작동했다

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a> 

: 그들은이처럼 routerLink에 정의되어 있는지에 따라 관련 구성 요소로드 이러한 링크 중 하나를 클릭합니다. 그러나 그 이후로 사용자가 선택한 다양한 필터 선택 사항을 URL의 매개 변수로 저장하는 앱을 만들었습니다. 이렇게하면 구성 요소를 다시로드 할 때 가장 최근의 선택 항목이 계속 표시되고 데이터에 적용됩니다.

이

http://somesite.com/page1;language_filter=true;language_selection=English 

이의 구성 요소 코드는 다음과 같습니다 :

이

public changePage(page, value, type, body) 
{ 
    this.onUserSelection(value, type, body, page); 

    this.route.params.subscribe(
     (params: any) => { 
      this.page = params['page']; 
      this.language_filter = params['language_filter']; 
      this.language_selection = params['language_selection']; 
     } 
    ); 
    this.router.navigate(
     ['/page1', { 
      page: page, 
      language_filter: this.language_filter, 
      language_selection: this.language_selection, 
     }]); 
} 

이 기본 탐색 방법에 대해 잘 작동되어 사용자가 어떤 필터 선택을 만들었다 후에 그래서 URL은 다음과 같이 나타납니다 각각은 다음과 같습니다 라우팅 파일을 통해 수행 : 내가 언급이 탭 영역에 대해,

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} } 

그러나 하드 코딩 된 routerLink 파에 따라로드 구성 요소입니다 오전. 이제 사용자가 BACK을 구성 요소로 탐색 할 때 다른 방법을 사용할 수있는 것과는 달리 URL 매개 변수를 실제로 무시합니다. 문자 그대로 "page1"을로드하기 때문에 - <a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

... 이전에 추가 된 URL 매개 변수가 지워집니다. 그것은 몇 가지 동적 변수 수 있도록

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a> 

... :

그래서, 내 질문은,이 코드를 편집 할 수있는 방법은 무엇입니까? 또는이 탭 영역에서 탐색을 처리하는 새로운 방법을 찾아야합니까?

Answer 1

여기는 queryParams을 사용하는 해결책입니다. fooParams은 일반 객체입니다

<a routerLink="/page1" [queryParams]="fooParams">Page 1</a> 
<a routerLink="/page2">Page 2</a> 
<router-outlet></router-outlet> 

:

첫째, queryParams 지시문을 사용하여 routerLink 지시에 매개 변수를 전달할 수 있습니다

export class MainComponent { 
    fooParams = { 
    language_filter: true, 
    language_selection: 'english' 
    } 
} 

각도가 출력

href="localhost:4200/page1?language_filter=true&language_selection=english" 

같은 URL을

다음에해야 할 일은, 는 ActivatedRoute을 가로채는 방식으로 설정되어 있으므로 ActivatedRouteSnapshot에서 매개 변수의 값을 추출 할 수 있습니다. 리졸버를 사용하거나 구성 요소에서 직접이 작업을 수행 할 수 있습니다.

const ROUTES: Routes = [ 
    { 
    path: 'page1', 
    component: PageOneComponent, 
    // In this route we define a resolver so we can intercept the 
    // activatedRoute snapshot before the component is loaded 
    resolve: { 
     routing: RoutingResolve 
    } 
    }, 
    { 
    path: 'page2', 
    component: PageTwoComponent 
    } 
]; 

그런 PageOneComponent 안에 당신이 해결 된 데이터에 가입하고 당신이 그것으로 원하는 건 뭐든지 할 수 있습니다 : 경로 정의에서 그 해결을 통과 한 후

@Injectable() 
export class RoutingResolve implements Resolve<any> { 
    resolve(routeSnapshot: ActivatedRouteSnapshot) { 
    const { language_filter, language_selection } = routeSnapshot.queryParams; 
    return { language_filter, language_selection }; 
    } 
} 

그리고 내 예제에서 나는 리졸버를 사용 예를 들어 양식을 사용하여 양식의 값을 설정하고 양식 변경시 queryParams를 업데이트하는 것과 같습니다.전체 예를 들어

---

,이 plunker

별도의 창에서 미리보기를 열 수 있는지 확인하십시오, 그래서 당신은 당신의 브라우저에서 경로 변경을 볼 수 있습니다.

페이지 1로 이동 한 경우 양식의 값을 변경 한 다음 페이지 2로 이동 한 다음 브라우저에서 다시 누르면 폼에로드 된 값이 URL의 매개 변수와 일치 함을 알 수 있습니다.