Angular 2 GET操作

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

似乎你必须使用可观察对象来监听serachbar中的变化，使用一些可观察对象来监听搜索栏中的信息，这些信息会在按钮单击或输入时触发事件，或者任何你喜欢的东西。

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

路由有很多内置的东西。其中之一就是看看你现在在哪条路线上。

在你的情况下，我会做的是检查“当前路线”。如果您不在" search -route“(/search/)上，请导航到包含搜索数据的页面(就像您现在正在做的那样)。创建一个用来存储搜索数据的变量。

如果您已经在搜索页面上，那么您不应该导航到" search -route“，您应该只在提交时使用新的搜索数据更新之前创建的变量。如果这个变量是数据绑定的，那么一切都应该自动更新。

伪代码：

  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 */
    }
  }

我希望这能对你有所帮助。