Question

我的标题有一个搜索表单。无论何时提交该表单，我都会重定向到另一个URL，如下所示：

private onSubmit(){
    var url = './search/' + this.searchForm.get("query").value;
    this.router.navigate([url]);
  }

现在我在搜索结果页面上，一切正常。但是，如果我再次从搜索结果页面中使用标题中的搜索表单，则不会发生任何变化。我不得不将搜索结果从ngOnInit加载到ngDoCheck的代码更改。

ngDoCheck()
  {
    var query;

    this.route.params.forEach(params => 
    {
      query = params['query'];
    });

    this.items = this.itemService.searchItems(query);
  }

我的目标只是在我的网站顶部有一个搜索表单，它会将我带到结果页面并向我显示结果。就像任何旧的GET表单和一些服务器端代码一样。在Angular 2中实现这一目标的合理方法是什么？

Answer 1

似乎你必须使用observable来收听serachbar中的变化，使用一些observable来搜索搜索栏中的chnages，点击或输入按钮或任何你喜欢的事件。

import { Observable } from 'rxjs/Rx';
import * as Rx from 'rxjs/Rx';
import 'rxjs/add/observable/of';
import 'rxjs/Rx';
import 'rxjs/add/operator/map'
.....


AbcObs: Rx.Subject<any> = new Rx.Subject<any>();
ABC: number = 0;


In your file where you want to show results
this.base_path_Service.ABcObs.subscribe(res => {
    // LISTEN TO CHANGES HERE AND FIRE SOME METHOD / EVENT AS PER REQUIREMENT
    //  here `base_path_Service` is some global service for the app
     this.onSubmit()
}

Answer 2

路线内置了很多东西。其中一个就是看你目前的路线。

在您的情况下我会做的是检查当前路线＆＃34;。如果您不在＆＃34;搜索路线＆＃34; （/ search /），使用搜索数据导航到该页面（正如您现在正在做的那样）。创建一个存储搜索数据的变量。

如果您已经在搜索页面上，则不应该导航到＆＃34;搜索路线＆＃34;您只应在提交时使用新的搜索数据更新您之前创建的变量。如果此变量是数据绑定的，则所有内容都应自动更新。

伪代码：

  private onSubmit(){
    if(/* NOT ON SEARCH-ROUTE */){
         var url = './search/' + this.searchForm.get("query").value;
         this.router.navigate([url]);
    }else{
         /* Update the variable on the search-page that holds the search-data */
    }
  }

我希望这有任何帮助。

Angular 2 GET操作

2 个答案: