角2 GET操作

Question

私のヘッダーは検索フォームを持っています。そのフォームが送信されると、次のように別のURLにリダイレクトされます：

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

私は検索結果ページにあり、すべて正常です。しかし、検索結果ページからヘッダー内の検索フォームを再度使用すると、何も変わりません。 ngOnInitからngDoCheckに検索結果がロードされるコードを変更する必要がありました。

​​

私の目標は、結果ページに私を連れて行き、結果を示す私のウェブサイトの上部に検索フォームを置くことです。どんな古いGETフォームやいくつかのサーバー側のコードと同様です。 Angular 2でこれを達成するための賢明な方法は何でしょうか？

Answer 1

あなたはserachbarの変更を聞くためにobservableを使わなければならないようですが、ボタンのクリックやエントリーなど好きなところでイベントを発生させる検索バーのchnageを聞くために観測可能なものを使います。

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

ルートにはたくさんのものが組み込まれています。その1つは、あなたが現在どのルートにいるかを確認することです。

私があなたの状況で行ったことは、「現在のルート」を確認することです。 「検索ルート」（/ search /）にいない場合は、検索データを含むページに移動します（現在行っているように）。検索データを格納する変数を作成します。

既に検索ページにいる場合は、「検索ルート」に移動しないでください。送信すると、以前に作成した変数が新しい検索データで更新されます。この変数がデータバインドされている場合、すべてが自動的に更新されます。

擬似コード：

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

私は、これは任意の助けであると思います。