queryparamが使用されている場合、ルーティングするクエリパラメータをプログラムで追加する

Question

私はこのことを研究する日を過ごす用意ができていますが、皆さんは答えが得られることを願っています。

Iは、以下の変数

inputCity; 
    inputGuestNumber; 
    inputCapacitySelected; 
    inputCuisineSelected; 
    inputPrivacySelected; 
    inputVenueTypeSelected; 
    inputAmenitiesSelected; 
    inputNeighborhoodSelected; 

これらの変数は、ユーザがフォームに入るどのような情報に応じて移入または定義されてもしなくてもよいか、を有しています。

私はセットアップ、現在のルータを持っている：

onSubmit(){ 
    this.router.navigate(['/venue-list', 
    this.inputCity], {queryParams:{guestCount: this.inputGuestNumber, countOption: this.inputCapacitySelected, 
    cuisineSelected:this.inputCuisineSelected, privacySelected:this.inputPrivacySelected, 
     venueTypeSelected: this.inputVenueTypeSelected, amenitiesSelected: this.inputAmenitiesSelected, 
    neighborhoodSelected: this.inputNeighborhoodSelected} 

    }); 

私はqueryparamがundefindedれた場合、それはすべてのqueryparamsが追加される代わりに、無視されることを期待して、このようにそれを設定。

これで、クエリパラメータが使用されている場合、クエリパラメータをqueryparams引数に追加したいと考えています。私はこれをどうやって行うのか分かりませんし、私の研究を始めました。

グロスのURLが生成されるため、デフォルト値は受け入れられません。大変ありがとうございました

Answer 1

私はわからないんだけど、手動で個別に各1を経由する以外の条件付きパラメータを追加するための簡単な方法があるかどう。おそらくもっと簡単なのは、オブジェクト全体を構築して、欠落しているオブジェクトをフィルタして削除することです。

onSubmit() { 
    const queryParams = { 
     guestCount: this.inputGuestNumber, countOption: this.inputCapacitySelected, 
     cuisineSelected:this.inputCuisineSelected, privacySelected:this.inputPrivacySelected, 
     venueTypeSelected: this.inputVenueTypeSelected, amenitiesSelected: this.inputAmenitiesSelected, 
     neighborhoodSelected: this.inputNeighborhoodSelected 
    } 

    Object.keys(queryParams) 
     .filter(key => queryParams[key] === null || queryParams[key] === undefined) 
     .forEach(key => delete queryParams[key]) 

    this.router.navigate(['/venue-list', this.inputCity], {queryParams}) 
} 

Answer 2

これは、同じ問題に対してオープンな問題が多いので、これは非常に難しいです。

のgitでこのような問題の1つ - https://github.com/angular/angular/issues/12347

どちらのあなたは私が見つけ、このコードを見てみることができます

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: ':product', component: ProductComponent, resolve: { product: ProductResolver } }, 
    { path: ':product/:card', component: ProductComponent, resolve: { product: ProductResolver } }, 
    { path: ':product/:group/:card', component: ProductComponent, resolve: { product: ProductResolver } }]; 

またはクエリのparamなどの各タイプごとに1つのように、オプションのルートを持っている必要がありますgithub上の要点の一つ。あなたのルータの解決策で使用することができます。 paramsを取得して確認します。同じのため

リンク - https://gist.github.com/e-oz/5a95f50336e68623f9e0

export class UrlParser 
{ 
    getParameter(key) { 
    return this.getParameters()[key]; 
    } 

    getParameters() { 
    // http://stackoverflow.com/a/2880929/680786 
    var match, 
     pl = /\+/g, // Regex for replacing addition symbol with a space 
     search = /([^&=]+)=?([^&]*)/g, 
     decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, 
     query = window.location.search.substring(1); 

    let urlParams = {}; 
    while (match = search.exec(query)) { 
     urlParams[decode(match[1])] = decode(match[2]); 
    } 
    return urlParams; 
    } 

    setParameter(key:string, value) { 
    let params = this.getParameters() || {}; 
    if (params[key]==value) { 
     return true; 
    } 
    params[key] = value; 
    let search = []; 
    for (let k in params) { 
     if (params.hasOwnProperty(k)) { 
     search.push(encodeURIComponent(k)+"="+encodeURIComponent(params[k])); 
     } 
    } 
    let query = '?'+search.join('&'); 
    let history = DOM.getHistory(); 
    if (history && history.replaceState) { 
     history.replaceState(null, '', location.pathname+query); 
    } else { 
     return false; 
    } 
    return true; 
    } 
} 

UPDATE

私はGITにチケットの1で述べたように、それは新しいルータで扱われていると思います - 今すぐhttps://github.com/angular/angular/issues/3525

オプションのルートは、localhost:3000/heroes;id=15;foo=foo";"で区切られます。

id値は、URLパスにではなく、（; id = 15; foo = foo）としてURLに表示されます。 "Heroes"ルートのパスには：idトークンがありません。

オプションのルートパラメータは、 "？"で区切られません。 「&」のようにURLクエリ文字列に含まれます。それらはセミコロンで区切られています ";"これは行列URLの表記です。以前は見たことがないかもしれません。

は役立つかもしれない、このリンクを見てみましょう - https://angular.io/guide/router#route-parameters-required-or-optional