2017-07-12 4 views
4

私は、ほとんどのルートが特定のプロジェクトに関連し、projectIdを含むAngularアプリケーションを構築しています。上のナビゲーション領域には、プロジェクトのドロップダウンリストが表示されます。ユーザーがプルダウンからプロジェクトを選択すると、現在のルートに移動する必要がありますが、projectIdは新しい値に置き換えられます。Angular 2のルートパラメータを一般的に置き換えてナビゲートする

これはAngular navigate to url by replacing an existing parameterと非常によく似ていますが、受け入れられた回答ではクエリパラメータが使用されました。これは、必要なルートパラメータで動作する必要があります。また、projectIdはルート内の異なる位置に表示される可能性があるため、一般にルートパラメータを名前でスワップアウトする必要があります。

だから、仮に、私は次のルートを持っているかもしれません:

project/:projectId/details 
dashboard/status/:projectId/:year/:month/:day 
admin/projects/:projectId 
admin/contacts/:projectId/settings 
admin/generalSettings 

これらのルートは架空のですが、PROJECTIDは、様々な位置に表示され、任意の特定の単語が先行されないことを示している(私は例のために見ることができません"project"という名前のセグメントが次のセグメントを取得します)。

概念的に、私はルータから

  • グラブ
  • のparams現在のルートと(paramMapのような)ルートのparamsのマップ、クエリパラメータ、およびマトリックスをそれらのマップの値を変更したいのですがつまり、paramMapに "projectId"が含まれている場合は、それを更新します。
  • ルートとマップをルータに戻してそこにナビゲートします。

したがって、概念的には単純ですが、ルータのrouterStateとそのルートツリー(私がはっきりしない)とRouter.navigateメソッドを見ると、これを達成する方法はわかりません。ルートの再構築には問題はありませんが、1)アプリのルート構造を知らなくても一般的に行うことができ、2)ルートが元のルートと同じである限り(クエリーパラメータと行列パラメータを含む)を、対象となるルートパラメータ(projectId)への変更以外のものに変更します。これについて

答えて

1

何:

私はActivatedRouteとルーターが私のサービス/コンポーネントに注入されてい:

constructor(
    private route: ActivatedRoute, 
    private router: Router) {} 

それから私は、ルート行列のパラメータを変更するための方法を作りました。パラメータは置き換えられる行列パラメータの名前と新しい値です。私は、パスセグメントを活性化されたルートのパラメータと比較する以外の方法を見つけるために、他の方法を見つけることができませんでした。

changeParam(replaceParamName: string, val: any) { 
    let replacePathParamIndex; 
    let replacePathParamValue; 
    this.route.params 
     .map((params) => replacePathParamValue = params[replaceParamName]) 
     .mergeMap(() => this.route.url) 
     .map((urlSegment) => 
      urlSegment.map((segment, ndx) => { 
       if (segment.path === replacePathParamValue) { 
        replacePathParamIndex = ndx; 
       } 
       return segment.path; 
      }) 
     ) 
     .subscribe((pathparts: any[]) => { 
      pathparts[replacePathParamIndex] = val; 
      this.router.navigate(pathparts); 
    }); 
} 

は最後に呼び出すことによって置き換えルートに移動します。

changeParam('projectId','newprojectid'); 
関連する問題