Angular AppでRouterLink経由で動的URLパラメータを処理する

Question

私のAngular 2アプリには、ユーザが独立した、しかし文脈上関連するコンポーネントのグループから選択できるタブエリアがあります。

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a> 

これがうまく働いていた。彼らはこのように、routerLinkで定義されているものに応じて、これらのリンクのいずれか、関連するコンポーネントのロードをクリックします。しかし、それ以来、ユーザーが選択したさまざまなフィルタ選択をURLのパラメータとして保存するためにアプリケーションを構築しました。この方法でコンポーネントを再読み込みすると、最新の選択内容が引き続き表示され、データに適用されます。

http://somesite.com/page1;language_filter=true;language_selection=English 

、このためのコンポーネントのコードは次のようになります：

public changePage(page, value, type, body) 
{ 
    this.onUserSelection(value, type, body, page); 

    this.route.params.subscribe(
     (params: any) => { 
      this.page = params['page']; 
      this.language_filter = params['language_filter']; 
      this.language_selection = params['language_selection']; 
     } 
    ); 
    this.router.navigate(
     ['/page1', { 
      page: page, 
      language_filter: this.language_filter, 
      language_selection: this.language_selection, 
     }]); 
} 

これはあるメインナビゲーションメソッド、適していますユーザーは、いくつかのフィルタ選択をした後にそうURLは次のようになります。

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} } 

は、しかし、私が述べたこのタブ領域のために、それはハードコードされたrouterLink額面に応じてコンポーネントをロードしています：それぞれが次のようになり、ルーティングファイルを介して達成午前だから、ユーザが他の方法を利用するのではなく、利用者が戻るようにコンポーネントに戻ると、実際にはURLパラメータがオーバーライドされることに気付く。<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

...これにより、以前に追加されたURLパラメータが消去されます。それはいくつかの動的変数が可能になりますので

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a> 

...：

だから、私の質問があり、私はこのコードを編集することができます方法はありますか？または、このタブ領域でナビゲーションを処理する新しい方法を見つける必要がありますか？

Answer 1

ここに私がqueryParamsを使用して解決したものがあります。

まず、あなたはqueryParamsディレクティブを使用してrouterLinkディレクティブでパラメータを渡すことができます。

fooParamsはプレーンオブジェクトである

<a routerLink="/page1" [queryParams]="fooParams">Page 1</a> 
<a routerLink="/page2">Page 2</a> 
<router-outlet></router-outlet> 

：

href="localhost:4200/page1?language_filter=true&language_selection=english" 

よう

export class MainComponent { 
    fooParams = { 
    language_filter: true, 
    language_selection: 'english' 
    } 
} 

角度が出力されます。このURL

次に何をする必要がありますか？ ActivatedRouteを傍受する方法が設定されているので、ActivatedRouteSnapshotからパラメータの値を抽出することができます。これは、リゾルバを使用するか、コンポーネント内で直接行うことができます。

const ROUTES: Routes = [ 
    { 
    path: 'page1', 
    component: PageOneComponent, 
    // In this route we define a resolver so we can intercept the 
    // activatedRoute snapshot before the component is loaded 
    resolve: { 
     routing: RoutingResolve 
    } 
    }, 
    { 
    path: 'page2', 
    component: PageTwoComponent 
    } 
]; 

その後、PageOneComponentの内側にあなたが解決したデータをサブスクライブし、あなたがそれでやりたいことができます。ルート定義でそのリゾルバを渡し、その後

@Injectable() 
export class RoutingResolve implements Resolve<any> { 
    resolve(routeSnapshot: ActivatedRouteSnapshot) { 
    const { language_filter, language_selection } = routeSnapshot.queryParams; 
    return { language_filter, language_selection }; 
    } 
} 

そして：私の例では、私は、リゾルバを使用しましたたとえば、フォームの値をフォームの値に設定し、フォームの変更時にqueryParamsを更新するなどです。フルたとえば

---

、ブラウザでのルート変更を見ることができるので、別のウィンドウでプレビューを開くことを確認してください。このplunker

をチェックしてください。

Page 1に移動した場合は、フォームの値を変更してからページ2に移動し、ブラウザで戻ると、フォームにロードされた値がURLのパラメータに対応していることがわかります。