title: Angular router.navigate use array as list of queryParams
body: <p>Im navigating after building up a queryParams object with a form:</p>
  
  <pre><code>options {
      ...
      words: (4) ["chuck", "norris", "vs", "keanu", "reeves"]
  }
  </code></pre>
  
  <p>Then <code>navigate</code> with that object to update the URL's parameters:</p>
  
  <pre><code>this.router.navigate(['/search'], { queryParams: options });
  </code></pre>
  
  <p>The URL <code>words</code> param is duplicated for each entry like this:</p>
  
  <pre><code>/search?words=chuck&amp;words=norris&amp;words=vs&amp;words=keanu&amp;words=reeves
  </code></pre>
  
  <p>How do we <strong>pass in an array</strong> to <code>queryParams</code> properly?</p>
  
  <p>Links:
  <a href="https://angular.io/api/router/Router#navigate" rel="noreferrer">angular.io/api/router/Router#navigate</a>
  <a href="https://alligator.io/angular/query-parameters/" rel="noreferrer">alligator.io/angular/query-parameters</a></p>
  
  <p>queryParamsHandling has no affect on this.
  Here is a <a href="https://stackblitz.com/edit/queryparam-with-array" rel="noreferrer">StackBlitz</a> repro.</p>