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

Question

目前我在屏幕上有多个下拉字段。当选择的下拉值传递到查询参数时，所以我想创建添加的动态查询参数。我的代码如下

     // 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”中，那么我该怎么做。上述解决方案不起作用。

在 Angular 2 中应用动态创建查询参数的解决方案，但它不符合我的要求。那么你能帮助我吗？

Answer 1

QueryParams 应该采用一个对象而不是字符串，所以你可以用这种方式来做let query = {};// this is one of the dropdown valueif (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  });