router.query params Angular 5로 탐색

router.query params Angular 5로 탐색

쿼리 매개 변수가 있는 경로로 라우팅하는 데 문제가 있습니다. 다음과 같은 기능이 있습니다.

goToLink(link) {
    this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}

그리고 이 기능은

sortParams(link) {
    let queryParams = url.split('?')[1];
    let params = queryParams.split('&');
    let pair = null;
    let data = {};
    params.forEach((d) => {
      pair = d.split('=');
      data[`${pair[0]}`] = pair[1];
    });
    return data;
}

좋아요 그래서 기본적으로 무슨 일이 일어나고 있는지 저는 다음과 같은 기능을 가지고 있습니다.goToLink()url을 입력하고 전달되는 url은 쿼리 파라미터가 포함된 문자열입니다.

https://website.com/page?id=37&username=jimmy

위의 내용은 실제 보기에는 없는 예시일 뿐이지만 이제 쿼리 매개 변수를 가진 링크 문자열이므로 발생하는 일은 문자열에서 매개 변수를 제거하고 데이터 개체에 저장하는 것입니다.sortParams()기능하여 위의 문자열을 전달하면 이렇게 생긴 물체가 나타납니다.

{id: 37, username: 'jimmy'}

지금 그게 내가 전달하고 있는 것입니다.queryParams:라우터의 섹션. navigate,

객체가 반환될 때 함수는 이와 같이 보여야 합니다.

this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

그래서 원하는 경로로 성공적으로 라우팅하지만 쿼리 매개 변수는 다음과 같습니다.

/page;queryParams=%5Bobject%20Object%5D

제가 여기서 뭔가 잘못하고 있는 건가요?

어떤 도움이라도 주시면 감사하겠습니다!

편집

기능을 이것으로 바꾸면 됩니다.

 this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

같은 url을 받습니다./page;queryParams=%5Bobject%20Object%5D

첫 번째 매개변수를 위한 브래킷을 배치했지만 전체 경로 라인에 캡슐화했을 수 있습니다.

코드:

// This is the end of your route statement:  '}}]);' which the close bracket is included
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

경로 업데이트:

첫 번째 매개 변수 안에 ] 닫기 브래킷만 배치하고, 경로 문의 마지막 부분에 배치하지 않도록 합니다.

// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {id: 37, username: 'jimmy'}});

---

요약:.

this.router.navigate([ url ], { queryParams: { ... } })

쿼리 매개 변수를 포함한 URL 문자열로 이동하려면 router.navigateByUrl을 사용해 보십시오.

예를 들어,

this.router.navigateByUrl('/page?id=37&username=jimmy');

다음과 같이 시도합니다.

this.router.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});

this.router.navigateByUrl('/page?id=37&username=jimmy');

이것은 파라미터가 동적일 때 더 좋습니다.

언급URL : https://stackoverflow.com/questions/52980345/router-navigate-with-query-params-angular-5