搜索一次后无法再次搜索

Question

文件结构：

我有一个输入文本框，我在其中输入一些内容并将该值传递给名为 onRecievingResults() 的函数，然后使用参数将该值传递给另一个组件并发出 http 请求，如果我再次搜索我会得到结果无法得到结果。

faq.component.ts

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

search-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));