Angular2 라우터 keep 쿼리 문자열

Angular2 라우터 keep 쿼리 문자열

라우터를 사용하는 Angular2 (v2.0.1) 어플리케이션을 작성했습니다.웹 사이트는 여러 쿼리 문자열 매개 변수로 로드되므로 전체 URL은 처음에 다음과 같습니다.

https://my.application.com/?param1=val1&param2=val2&param3=val3

경로 구성에서 빈 경로를 리디렉션하는 항목이 있습니다.

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

문제는 앱이 부트스트랩 된 후 URL에 쿼리 매개 변수가 더 이상 포함되지 않고 다음과 같이 표시된다는 것입니다.

https://my.application.com/comp1

탐색할 때 초기 쿼리 문자열을 유지하도록 라우터를 구성할 수 있는 방법이 있습니까?

합니다 요.

경로 구성에서 그것을 정의할 방법이 없다고 생각합니다.

됩니다에 대해 되고 있습니다.routerLink

• Query Params를 보존합니다.
• 프래그먼트 보존

할 수 은 합니다. 여기서 가드 탐색은/comp1경로가 완료되었습니다.

router.navigate(['/comp1'], { preserveQueryParams: true }); //deprecated. see update note

router.navigate(['/comp1'], { queryParamsHandling: "merge" });

구성할 수 있는 PR이 있습니다.preserveQueryParams

업데이트 참고: https://angular.io/api/router/NavigationExtras, 에서 QueryParams가 더 이상 사용되지 않도록 유지합니다. 대신 queryParamsHandling을 사용하십시오.

HTML 템플릿을 사용하여 탐색하는 경우 다음을 사용할 수 있습니다.

<a [routerLink]="['/page-2']" [routerLinkActive]="['is-active']" queryParamsHandling="merge">

주의해야 할 점은 queryParamsHandling 매개변수가 대괄호가 없다는 것입니다.

다른 해킹 없이 이 작업을 수행할 수 있는 문서화되지 않은 방법은 "RedirectTo" 필드의 선두 슬래시를 간단히 제거하는 것으로 드러났습니다.전체 경로를 일치시키므로 원하는 작업(즉, 깜짝 URL 세그먼트 없음)을 수행할 수 있으며 더 이상 절대 대상이 아니므로 Angular는 현재 쿼리 매개 변수를 유지합니다.

그래서 이 경우에는

{
  path: '',
  redirectTo: '/comp1',
  pathMatch: 'full'
}

다음이 됩니다.

{
  path: '',
  redirectTo: 'comp1',
  pathMatch: 'full'
}

출처 : https://github.com/angular/angular/issues/13315

귄터 제흐바우어의 대답은 제대로 작동해야 하지만, 어떤 이유에서인지, 그것은 나에게 전혀 효과가 없습니다.을 하게 된 은 였습니다.queryParams을 '하는 대신에 으로 말입니다보존'하는 대신에 직접적으로 말입니다

제 경비원은 이렇게 생겼습니다.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    (...)
    this.router.navigate(['login'], { queryParams: route.queryParams });
}

이제 Angular 10에서는 다음과 같이 사용할 수 있습니다.

    import { ActivatedRoute, Router } from '@angular/router';

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

    someMethod() {
        //You can use either merge or preserve to keep the query params
        this.router.navigate(['/'], { queryParamsHandling: 'preserve' })

    }
}

 

https://github.com/angular/angular/issues 에서 이와 유사한 기능 요청을 검색할 수 있습니다.없는 경우 기능 요청을 제출합니다.

그 동안:QueryString 매개 변수를 보존하는 동안 '/comp1'로 리디렉션하는 유일한 목적으로 '' 경로에 구성 요소를 생성해야 할 것으로 생각합니다.

아무리 많이 대답해도 해본 결과, 저는 그것을 발견했습니다.

• 귄터 주치바우어의 대답은 나에게 전혀 통하지 않습니다.
• 을 ./도 안
• AArias의 답변은 효과가 있었지만 역사상 두 개의 URL을 추가하게 되었습니다.
  1. https://my.application.com/comp1?param=val<= ( ಠ 益ಠ )
  2. https://my.application.com/comp1;param=val

그래서 여기 또 다른 접근법이 있습니다. 결국 제 예상대로 행동한 것입니다.

import { ActivatedRoute, Router } from '@angular/router';

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

    someMethod() {
        router.navigate(['/comp1', this.route.snapshot.params]);
    }
}

Angular는 기본 경로 탐색을 통해 보조 경로를 지속하기 때문에 보조 경로를 사용하는 방법이 있습니다.

먼저 상위 구성요소에 명명된 라우터 콘센트를 추가합니다.

<router-outlet name="params"><router-outlet>

다음으로 다음 경로로 라우팅할 더미 구성요소를 만듭니다.

@Component({
    template: ""
})
export class ParamsComponent {}

그리고 이 구성요소를 명명된 배출구로 인스턴스화하는 경로를 정의합니다.

{
    path: ':val1',
    component: ParamsComponent,
    outlet: "params"
}

앱 탐색을 다음으로 변경:

https://my.application.com/(params:val1)

활성화된 경로를 살펴보면 다음을 사용하여 "params" 경로를 찾을 수 있습니다.

  var paramsRoute = this.activatedRoute.route.children.find(r => r.outlet == "params");

paramsRoute가 null이면 URL에 (params:val1)이 포함되지 않습니다.

이 다음 부분은 초기 로드 시 기본 경로 다음에 보조 경로가 인스턴스화되므로 약간 "해킹"됩니다.이 때문에 앱이 완전히 로드될 때까지 paramsRoute.snapshot이 null임을 알 수 있습니다.초기 시작 시 경로 매개 변수를 포함하는 개인 속성 "_futureSnapshot"이 있습니다...그리고 앱의 수명 동안 지속됩니다.다음을 사용하여 이를 확인할 수 있습니다.

var queryParams = 
      paramsRoute
      ? paramsRoute["_futureSnapshot"].params
      : {};
var val1 = queryParams["val1"];

_futureSnapshot이 공개 API의 일부가 아니라는 점을 고려하면, 이는 아마도 우리가 사용해서는 안 되는 분야일 것입니다.사용하기가 불편하다면 paramsRoute.params를 구독할 수도 있지만, 이렇게 하면 구성 요소가 복잡해질 수 있습니다.

if (paramsRoute) {
    paramsRoute.params.subscribe(params => {
        this.queryParams = params;
        this.loadData();
    });
} else {
    this.queryParams = {};
    this.loadData();
}

========= 수정 =============

쿼리 매개변수를 풀링하는 더 좋은 방법을 찾았습니다. 분명 노티키(Notic...라우팅이 발생하기 전에 인스턴스화된 구성요소 또는 서비스에 다음 논리를 추가합니다.

    const routeRecognizedSubscription = this.router.events
        .filter(e => e instanceof RoutesRecognized)
        .subscribe((e: RoutesRecognized) => {
            const paramsRoute = e.state.root.children.find(r => r.outlet == "params");
            if (paramsRoute) {
                // capture or use paramsRoute.params 
            }
            routeRecognizedSubscription.unsubscribe();
        });

이 코드는 탐색 전에 발생하는 Routes Recognized 이벤트에 일시적으로 가입합니다.첫 이벤트를 받고 나면 앱을 시작할 때만 하면 되기 때문에 자동으로 구독이 취소됩니다.

첫 번째 이벤트에서 "params" outlet에 해당하는 상태를 찾습니다.만약 발견된다면, 파람스 속성에는 우리가 필요로 하는 데이터가 포함될 것입니다.개인 속성에 액세스할 필요가 없습니다.

HTML 템플릿을 사용하여 탐색하는 경우 다음을 사용할 수 있습니다.preserveQueryParams="true"

주의하세요.preserveQueryParams사각형이 없는 상태입니다.

예:

<a [routerLink]="['/navigate-to']" preserveQueryParams="true">

원본 URL 캡처 -base href-

https://example.com/order?id=123

그러면 그것은 존립할 것입니다.

https://example.com/order?id=123 #/상품

언급URL : https://stackoverflow.com/questions/39898656/angular2-router-keep-query-string