Angular 4에서 FormGroup을 쿼리 매개 변수가있는 URL로 변환하는 방법은 무엇입니까?

Question

내 Angular 앱에는 사용자가 내부 데이터베이스를 검색하는 데 사용할 수있는 다단계 Reactive Form이 있습니다.

사용자가 "검색"을 클릭하면 결과를 표시하기 위해 SearchResultsComponent으로 연결하려고합니다. 또한 폼 입력을 나타내는 쿼리 매개 변수를 브라우저의 경로에 포함시켜 사용자가 어딘가에 복사하여 쉽게 다시 사용할 수 있도록하고 싶습니다. 본질적으로 상상할 수있는 것처럼 https://carsuniverse.com/?make=Honda&model=Civic&year=2009을 방문하면 SearchResultsComponent이 활성화되어 검색을 수행하는 서비스를 호출하고이를 구성 요소에 반환하고 페이지에 표시합니다.

가장 좋은 방법은 무엇입니까?) 각도로 이것을 할 수 있습니까?

Answer 1

이 시도 :

const params = new URLSearchParams(); 
const formValue = this.form.value; // this.form should be a FormGroup 

for (key in formValue) { 
    params.append(key, formValue[key]); 
} 

우리는 양식 값 개체를 잡아, 각각의 키에 대해 우리는 요청을 할 때 다음 Http 라이브러리에 건네 줄 수있는 URLSearchParams 객체에 값을 추가합니다.

양식이 깊이 중첩되어있는 경우이 문제에 대해 생각해보십시오. 당신이 중첩 형태가 검색어 매개 변수로 표시되도록하려면

UPDATE

, 당신은 약간 for 루프를 수정해야합니다.

{ 
    name: 'John', 
    favorites: { 
     food: 'Pizza', 
     candy: 'Jolly Ranchers' 
    } 
} 

위의 객체가 다음과 같이 표현 될 수있다 :

이 이

?name=John&favorites[food]=Pizza&favorites[candy]=Jolly+Ranc‌​hers