2017-01-25 6 views
1

私は:id:typeを受け付ける子ルートを持っています。これらは個別に動作し、割り当てられたコンポーネントをロードしますが、コンポーネントを一緒に使用する場合は一度だけロードされ、:idまたは:typeが更新された場合は再びロードされません。角2 - 割り当てられたコンポーネントを2回ロードしない複数のパラメータを持つルート

例:
myapp/1 - (:id用)>この負荷
myapp/b - (:type用)>この負荷
myapp/1/b - >この負荷が、一度だけ(:id/:typeの組み合わせのために)
myapp/2/b - >このコンポーネントを再度読み込まない(:idが更新された場合)

すべてのルートについて、ブラウザでURLが正しく変更されているのがわかります。

子ルートクラスのコード:

export const CHILD_ROUTES: Routes = [ 
    { path: '', component: TitleComponent }, 
    { path: ':id', component: TitleComponent }, 
    { path: ':id/:type', component: TitleComponent } //This componment doesn't load 
]; 


ルートを操作する/変更するために使用されるコード:
this.router.navigate(['/myapp', this.id]);
this.router.navigate(['/myapp', this.id, this.type]);

他の何かが必要な場合は私に知らせてください。

+0

がhttp://stackoverflow.com/questions/39762485/want-to-prevent-component-recreationのDUPのような音私はこれが役立つことを願っソリューション

export class IncidentAnalysisComponent implements OnInit, OnDestroy { id: number; limit: number; private sub: any; constructor(private route: ActivatedRoute) {} ngOnInit() { this.sub = this.route.params.subscribe(params => { this.id = +params['id']; this.limit = 5; // reinitialize your variable here this.callPrint();// call your function which contain you component main functionality }); } ngOnDestroy() { this.sub.unsubscribe(); } } 

のこの種を試してみてください-while-routing-in-angular-2/39763254#39763254最近、カスタム再利用戦略のサポートが導入されました。リンクされた回答には、チュートリアルへのリンクが含まれています。 –

答えて

1

新しいコンテンツが読み込まれない理由は、ActivatableRoute "params"を使用していてObservableなので、同じコンポーネントに移動したときにルータがコンポーネントを再作成しないことがあります。あなたのケースでは、コンポーネントは再作成されることなく変更されます。 そう:)

+1

これは私のために働いた。説明していただきありがとうございます。 – ToDo

関連する問題