2016-06-30 5 views
35

ルータから新しいAngular 2ルータを使用するようにアップグレードしましたが、一部の動作が変更されました。コンポーネントを更新しない同じルートに移動しますか?

問題が発生しているページは検索ページです。 HashLocationStrategyを使用してすべての検索語句をURLに入れることにしました。ルートは次のようになります。

const routes: RouterConfig = [ 
    { path: '', component: HomeComponent }, 
    { path: 'search/:term/:cat/:page/:sort/:size/:more', component: HomeComponent }, 
    { path: 'search/:term/:cat/:page/:sort/:size', component: HomeComponent }, 
    { path: 'search/:term/:cat/:page/:sort', component: HomeComponent }, 
    { path: 'search/:term/:cat/:page', component: HomeComponent }, 
    { path: 'search/:term/:cat', component: HomeComponent }, 
    { path: 'search/:term', component: HomeComponent }, 
    { path: 'details/:accountNumber', component: DetailsComponent } 
]; 

は、私は、クエリ文字列のアプローチは、これらすべてのオプションが、他の人が決定したプロジェクトの要件のためのより良いフィットかもしれない知っている...

をとにかく、私はその後、this.router.navigate(['/search/Hello']);を使用してlocalhost/#/search/Helloに移動した場合ルータは正常に動作し、すべてが素晴らしいです。このページでthis.router.navigate(['/search/World']);を試してみると、ブラウザのアドレスバーのURLはそれに応じて更新されますが、コンポーネントはまったく変更されません。

以前はrouterCanReuseを使用して検索コンポーネントを再利用したいと表示し、routerOnReuseはナビゲーションが発生したときに検索を再実行します。私は@angular/routerにこれらと同等のものは見当たりません。新しいURLパラメータで現在のルートを再ロードするにはどうすればよいですか?

私はAngular 2のバージョン2.0.0-rc.3と@ angular/routerの3.0.0-alpha.8を実行しています。

+0

を私はapp.component.tsページまたは実際のページにこのコードを置くことができる場所を教えてproblem.can同じ直面しています(これはリロードされていません)。 ** this.service.get(term).then(result => {console.log(result);}); **というものがもう1つあります。あなたは簡単に説明できますか? – pushp

答えて

33

paramsだけに変更が加えられている場合、コンポーネント自体は再び初期化されません。しかし、送信するパラメータの変更を購読することができます。

はngOnInit方法の一例について、あなたはこのような何かを行うことができます。

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     const term = params['term']; 
     this.service.get(term).then(result => { console.log(result); }); 
    }); 
    } 
+3

なぜ私はparamsがObservableだったのか不思議でした。これはそれを説明し、多くの意味があります。 –

+5

私はこれを理解していません。問題または少なくとも私の問題は、同じルートが別のパラメータ値で呼び出されたときにngOnInit関数が再び実行されないことです。それで何が助けになるの? – Inigo

+1

角度は、コンポーネントを再びマウントする必要はありません。データのみが変更されており、具体的にはルートデータです。したがって、ルートデータが変更されたときにいつでも呼び出される関数があり、この変更に反応することができます。 –

関連する問題