2016-12-06 4 views
7

私は3つのコンポーネントを持っていますが、それぞれが独自のリゾルバを持ち、異なるAPIからデータを取得します。 これを行うには、これらのコンポーネントは、サービスを使用してそれらの間で共有されるURLに依存します。Angular2:リゾルバ依存コンポーネントをリフレッシュするにはどうすればいいですか?

私は、そのURLへの変更が発生したときに、各コンポーネントが自動的にリロードすること、つまりリゾルバを再起動したいと考えています。

は、私はいくつかの関連のSOの質問を見ていたが、どれもリゾルバ、CF使用時にこれを行うにはどのように言及していない:

汚い方法:question 1question 2を私は2つの方法のquestion 3

を考えることができ、 :ルータのリダイレクトと空のコンポーネントを使用して、コンポーネントのリフレッシュを強制します。

this.router.navigateByUrl('blank',true); 
this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)'); 

しかし、これは機能しませんでした。リフレッシュがありますが、リゾルバは解決されません。

他の方法:BehaviorSubjectまたはChangeDetectorRefを使用します。 しかし、コンポーネント内の変更を検出してもリゾルバを実際に再起動することはできないと考えて、それを達成する方法はわかりません。これを達成する方法について

const routes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'home', 
    component: HomeComponent, 
    children : [ 
     { 
     path: '', 
     component: BlankComponent 
     }, 
     { 
     path: 'simil', 
     component: SwComponent, 
     outlet: 'sw', 
     resolve: { 
      data: SwResolve 
     } 
     }, 
     { 
     path: 'sales', 
     component: SalesComponent, 
     outlet: 'sf', 
     resolve: { 
      data: SalesResolve 
     } 
     } 
    ] 
    }, 
    { 
    path: 'blank', 
    component: BlankComponent 
    } 
]; 

任意のヒント:それはリゾルバについて知る1であるため

私の気持ちは、これは何とかルータを介して行わなければならないことですか?

編集:ここにあるrelated plunkr

編集6月17日: 空白のコンポーネントの問題を回避するための必要はもうありません。 コンポーネントを更新するには、単にルートをコールバック:

this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)')

+1

してください、あなたはリゾルバを使用する方法に[MCVE](http://stackoverflow.com/help/mcve)詳細を提供して。ルートが 'ActivatedRoute'(' ActivatedRouteSnapshot'ではなく)として注入されると、[ここ](https://angular.io/docs/ts/latest/guide/router.html)に示されているように、 'data'を購読することができます#!#fetch-data-before-navigating)。 – estus

+0

@estus詳細なplunkrを追加しました。 Linkは、すでに使用しているActivatedRouteSnapshotの使用方法を示しています。 – Stanislasdrg

+0

さて、わかりました。そしてリゾルバをリフレッシュするはずのリダイレクトは、このパンクで起こるはずです。 – estus

答えて

9

ルートを更新することはできません。おそらくそれを行うことが可能になりますwith RouteReuseStrategy in Angular 2.3

解決者はルートが変更されたときに再評価され、ActivatedRouteから観察できます。ルートが同じままになっている(パラメータが変更されていない)場合、再評価されず、それに応じて設計する必要があります。

ルート変更は、この問題を回避するには、チェーンのルート変更にある、非同期です:

this.router.navigateByUrl('blank').then(() => { 
    this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)'); 
}) 
+0

ありがとうございました。私は路線の変更が非同期であることに気付かないために、正直な印象を受ける必要があります。私のリゾルバーは経路パラメータを取っていないので、これまでのところ最も単純な解決策です。 – Stanislasdrg

+0

これはうれしい – estus

関連する問題