如果使用查询参数,则以编程方式将查询参数附加到路由
programmatically appending query params to route if queryparam is used
我准备花一天时间研究这个,但我希望你们能给我答案,否则这将是一整天的事情。
我有以下变量
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
未定义,它将被忽略,而不是附加所有查询参数。
所以现在我希望将查询参数附加到查询参数参数,如果使用查询参数的话。我不知道该怎么做并开始了我的研究。
默认值是不可接受的,因为它仍然会产生毛url。非常感谢大家
这很棘手,因为同样有很多未解决的问题。
git 中的一个这样的问题 - 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 } }];
或者您可以查看我在 github 上的一个要点中找到的这段代码。您可以在您的路由器解析中使用。获取参数并检查。
Link 同样 - https://gist.github.com/e-oz/5a95f50336e68623f9e0
export class UrlParser
{
getParameter(key) {
return this.getParameters()[key];
}
getParameters() {
//
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;
}
}
更新
我认为它已在新路由器中处理,如 GIT - 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 表示法——你以前可能没见过。
看看这个 link 可能会有帮助 - https://angular.io/guide/router#route-parameters-required-or-optional
我不确定是否有任何简单的方法可以有条件地添加参数,除了手动逐个检查每个参数。可能更容易的是构建整个对象,然后过滤掉并删除丢失的对象。
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})
}
我准备花一天时间研究这个,但我希望你们能给我答案,否则这将是一整天的事情。
我有以下变量
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
未定义,它将被忽略,而不是附加所有查询参数。
所以现在我希望将查询参数附加到查询参数参数,如果使用查询参数的话。我不知道该怎么做并开始了我的研究。
默认值是不可接受的,因为它仍然会产生毛url。非常感谢大家
这很棘手,因为同样有很多未解决的问题。
git 中的一个这样的问题 - 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 } }];
或者您可以查看我在 github 上的一个要点中找到的这段代码。您可以在您的路由器解析中使用。获取参数并检查。
Link 同样 - https://gist.github.com/e-oz/5a95f50336e68623f9e0
export class UrlParser
{
getParameter(key) {
return this.getParameters()[key];
}
getParameters() {
//
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;
}
}
更新
我认为它已在新路由器中处理,如 GIT - 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 表示法——你以前可能没见过。
看看这个 link 可能会有帮助 - https://angular.io/guide/router#route-parameters-required-or-optional
我不确定是否有任何简单的方法可以有条件地添加参数,除了手动逐个检查每个参数。可能更容易的是构建整个对象,然后过滤掉并删除丢失的对象。
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})
}