Question

我有一个我在html中编写的输入框，我通过.ts文件中的双向数据绑定获取输入框中的任何内容。 InputBox位于父组件中

<input [(ngModel)]="inputValue" placeholder="Search FAQ" type="text"/>
<button type="submit" (click)="onRecievingResults()"></button>

这是.ts文件，我获取输入文本，并使用params字段将值传递给子组件。

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

这里我使用subscribe获取输入值，我通过http请求服务，我第一次得到结果。但是当我再次传递该值时，它不会取值并给出结果。

ngOnInit() {
this.route.params
.subscribe(
(params: Params) => {
this.inputValue = params['inputValue'];
}
);

this.faqService.getServers(this.inputValue)
    .subscribe(
    (data) => {
        this.item = data.items;
        console.log(this.item);
        },
        (error) => console.log(error)
    );
}

HTTP请求服务

getServers(inputValue) {
    console.log(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

根据你的逻辑，它是正确的行为，让我们按照事件的流程。

起初组件结果不存在

在第一次点击时，您将路由到结果组件

angluar实例化结果组件并执行ngOnInit方法第一次执行你的逻辑

您第二次点击该按钮。

angular不会重新实例化结果组件，因为它已经存在，getServers（this.inputValue）将不会被调用。

但是params订阅中的逻辑是执行的，因为params值已更改，因此您可以通过在params订阅回调中移动getServers（this.inputValue）来解决它。如下：

ngOnInit() {
    this.route.params.subscribe(  (params: Params) => {
       this.inputValue = params['inputValue'];

       this.faqService.getServers(this.inputValue).subscribe( 
         (data) => {
           this.item = data.items;
           console.log(this.item);
         },
         (error) => console.log(error)
       );
    });
}

Http请求第二次没有再次获取inputvalue

1 个答案: