Angular2 검색 동적 결과

Question

검색을 Angular2로 구현하려고합니다.

우리는 휴식 서비스에서 결과를 얻을 수있는 검색을 원합니다. 동적으로 구현하기를 원하므로 사용자가 5 자 이상을 입력하면 검색을 수행해야합니다.

여러 가지 예 (Angular2 사이트의 영웅의 예)가 있으며이를 수행 할 수 있습니다. 그러나 우리가 가진 유일한 문제는 뒤로 버튼이 작동하지 않는다는 것입니다.

크기 때문에 프리 페치를 수행 할 수 없습니다.

그래서 우리는 라우터와 검색 버튼을 사용하여 구현했습니다. 따라서 검색 버튼을 클릭하면 검색을 수행하고 URL 선택적 매개 변수로 전달하고 매개 변수에서 결과를 얻습니다. 그것은 또한 일하고있다.

하지만 검색 버튼을 사용하지 않고 동적 인 검색을 구현하는 방법을 알지 못합니다. 우리는 또한 뒤로 버튼 작업을하고 싶습니다.

어떻게 구현할 수 있습니까?

Answer 1

하지만 검색 버튼을 사용하지 않고 동적 인 검색을 구현하는 방법을 알지 못합니다.

이 몇 가지 예는이 온라인 있지만, 일반적으로 API를 명중 검색은 이런 일의 라인을 따라 간다 :

//in HTML 
<input id="searchInput" type="text"/> 
{{search$ | async}} 

//in component 
let searchInput = document.querySelector('#searchInput'); 

    let search$ = Observable.fromEvent(searchInput, 'input') // create observable from input events 
          .debounceTime(500) // wait 500 milliseconds 
          .map(e => e.target.value) // extract the input value 
          .switchMap(value => http.get('url?search=' + value)); //switch to another obs and return it, in Angular would be the http call