搜索一次，不能再次搜索

Question

文件結構後PARAMS，並使http請求，我得到的結果，如果我再次搜索我無法得到結果。

faq.component.ts

onRecievingResults() { 
    this.router.navigate(['results', this.inputValue], {relativeTo: this.route}); 
} 

搜索results.component.ts

export class SearchResultsComponent implements OnInit { 
data: any[]; 
item: any[]; 

inputValue; 
constructor(private faqService: FaqService,private route: ActivatedRoute,) { 
} 
ngOnInit() { 
this.route.params.subscribe(
(params : Params) => { 
this.inputValue = params["inputValue"]; 
    } 
); 
    this.faqService.getServers(this.inputValue) 
     .subscribe(
     (data) => { 
      this.item = data.items; 
     }, 
     (error) => console.log(error) 
    ); 
    } 
} 

faq.service.ts

getServers(inputValue) { 
    return this.http.get(Staticdata.apiBaseUrl + "/2.2/search/advanced?key="+ Staticdata.key +"&access_token="+ Staticdata.access_token +"&/2.2/search/advanced?order=desc&sort=activity&accepted=True&closed=True&title=" + inputValue + Staticdata.redirectUrl + "&filter="+ Staticdata.filters) 
     .map(
     (response: Response) => { 
      const items = response.json(); 
      return items; 
     }, 
    ) 
    .catch(
     (error: Response) => { 
      return Observable.throw(error); 
     } 
); 
} 

Answer 1

appcomponent.html

<app-child [items]="items"></app-child> 
<form [formGroup]="searchForm"><input formControlName="search"></form> 

appcomponent.ts

export class AppComponent implements OnInit { 
searchForm: FormGroup; 
search= new FormControl(); 
searchField: FormControl; 
items; 

constructor(private fb: FormBuilder, private service: AppService){} 

    ngOnInit(){ 
     this.searchField = new FormControl(); 
     this.searchForm = this.fb.group({search: this.searchField}) 

       this.searchField.valueChanges 
       .debounceTime(400) 
       .switchMap(res => this.service.search(res)) 
       .subscribe(res => {this.items = res});} 

APP-child.component.html

<h3>child component Search bar values of parent component</h3> 
<div *ngFor="let item of items"> 
     {{item}} 
    </div> 

app-child.component.ts

@Component({ 
    selector: 'app-child', 
    templateUrl: './appchild.component.html' 
}) 
export class appChildComponent { 
@Input() 
    items; 
} 

根據你的要求有關服務參考檢查這個plunker

Answer 2

您應該訂閱輸入的變化：

@Output() searchEvent: EventEmitter = new EventEmitter(); 

this.searchBox 
    .valueChanges 
    .debounceTime(200) 
    .subscribe((event) => this.searchEvent.emit(event));