Append Query String to page url in Angular (without JQUERY)

Question

I can't find a method to append a query string to page url in angular (without using jQuery).

It does not work to simply add the string as queryParams, like this:

    this.router.navigate([],
     {
      queryParams: { queryString }
     }
    );

because Angular automatically add in url the name of queryParam

    localhost:4200/?queryString=...

And I also tried to use empty string

    this.router.navigate([],
     {
      queryParams: { "": queryString }
     }
    );

but I had same problem (Angular added empty string in url)

    localhost:4200/?=...

I also tried to add each Query Parameter in url (one by one) but I can't understand why when I'm doing this, I have as query parameter only the last interation.

I started from this object:

    filters = {
        inspectionAttributes: [
          { inspectionAttributeId: 53, inspectionAttributeValue: 93 },
          { inspectionAttributeId: 53, inspectionAttributeValue: 265 },
          { inspectionAttributeId: 56, inspectionAttributeValue: 214 }
        ],
        status: [1, 2]
    };

I used this method to generate the query string:

    parseJsonAsQueryString(object: any, prefix?: string) {
        const queryString = [];
        for (const property in object) {
          if (object.hasOwnProperty(property)) {
            const value = object[property];
            if (typeof value === "object") {
              const key = prefix ? prefix + "[" + property + "]" : property;
              queryString.push(this.parseJsonAsQueryString(value, key));
            } else {
              const key =
                prefix && isNaN(parseInt(property, 10))
                  ? prefix + "." + property
                  : prefix;
              queryString.push(key + "=" + value);
            }
          }
        }
        return queryString.join("&");
      }

And I got that

    ?inspectionAttributes[0].inspectionAttributeId=53&inspectionAttributes[0].inspectionAttributeValue=93&inspectionAttributes[1].inspectionAttributeId=53&inspectionAttributes[1].inspectionAttributeValue=265&inspectionAttributes[2].inspectionAttributeId=56&inspectionAttributes[2].inspectionAttributeValue=214&status=1&status=2

And what I'm actually trying is to append this result to page url, like this

    localhost:4200/?inspectionAttributes[0].inspectionAttributeId=53&inspectionAttributes[0].inspectionAttributeValue=93&inspectionAttributes[1].inspectionAttributeId=53&inspectionAttributes[1].inspectionAttributeValue=265&inspectionAttributes[2].inspectionAttributeId=56&inspectionAttributes[2].inspectionAttributeValue=214&status=1&status=2

I also tried to add each object property one by one to url by modifying the previous method in this way:

    parseJsonAsQueryString(object: any, prefix?: string) {
        for (const property in object) {
          if (object.hasOwnProperty(property)) {
            const value = object[property];
            if (typeof value === "object") {
              const key = prefix ? prefix + "[" + property + "]" : property;
              this.parseJsonAsQueryString(value, key);
            } else {
              const key =
                prefix && isNaN(parseInt(property, 10))
                  ? prefix + "." + property
                  : prefix;
              this.router.navigate([],
                {
                  queryParams: { [key]: [value] },
                  queryParamsHandling: 'merge'
                }
              );
            }
          }
        }
      }

So, I didn't push anymore the values into an array and I'm trying to append each time the pair of key->value to the current url. But using this method, I can't understand why, I got just the last interation in url:

    localhost:4200/?status=2