如何在 Angular 7 中使用字符串添加动态查询参数？

Question

目前我在屏幕上有多个下拉字段。 when selected dropdown value pass in the query param so I want to create dynamic query param added.我的代码在下面

     // this is one of the dropdown value
    if (this.SearchText) {
        query += 'q:' + SearchText + ',';
       }
// this is the second one of dropdown value 
    if (this.MakeId) {
        makename = this.SpaceToDash(this.MakesList.find(x => x.Id === +this.MakeId).Name);
        navigateUrl += '/' + makename;
        query += 'merk:' + this.MakeId + ',merkname:' + makename + ',';
       }
    this.router.navigate([ navigateUrl ], { queryParams: { query } });

因此，如果“MakeId”不是下拉值，则不应在“queryParams”中添加，我该怎么做。上面的解决方案不起作用。

为Dynamically create query Params in Angular 2 应用解决方案，但它不符合我的要求。那你能帮我看看吗？

Answer 1

QueryParams 应该采用 Object 而不是字符串，

这样就可以了

let query = {};
// this is one of the dropdown value
if (this.SearchText) {
    query['q'] =  SearchText;
   }
// this is the second one of dropdown value 
if (this.MakeId) {
    makename = this.SpaceToDash(this.MakesList.find(x => x.Id === +this.MakeId).Name);
    navigateUrl += '/' + makename;
    query['merk'] =  this.MakeId;
    query['makename'] =  makename;
   }
this.router.navigate([ navigateUrl ], { queryParams:  query  });