Winkel 2, gewusst Wie: übergeben Sie ein array, um den Router mit queryParams

Gibt es eine Möglichkeit, um diese Art von url in Eckige 2?

http://www.domain.com/the-route?param[]=value1&param[]=value2&param[]=value3

Ich versuche, es zu tun, wie es sein sollte, mit queryParams mit der Router, aber wie queryParams akzeptiert ein Objekt kann ich das nicht:

this.router.navigate(['/the-route'], queryParams: { 'param[]': 'value1', 'param[]': 'value2', 'param[]': 'value3' });

Weil, natürlich, ich kann nicht den gleichen Namen verwenden (param[]) mehrmals in das Objekt

Ich bin zu kämpfen, wie Sie dies tun, kann aber nicht einen Weg finden,

Ich habe gesehen, dass dieses post:
Winkel-2: array-router-queryString. Aber es gibt keine richtigen Antworten

Ich denke, die Frage sollte sein, warum würden Sie wollen Ihren params in diesem format? Router naviagtion ist nur dafür gedacht, lokale navigation über diesen link (mit Parameter) wird nie am Ende auf dem server. Sind Sie sicher, Sie sind auf der Suche nach lokalen nav? Oder willst du einen server hier nennen (dann kann ich verstehen das array-format)?
Ja MikeOne, möchte ich ein Server-Aufruf über einen Dienst abzurufen, einige json-Daten
Über eine service? Okay. Sie navigieren hier auf einer festgelegten route, die wahrscheinlich eine Komponente verwendet. Wo kommt der service (du meinst ein Eckiges service hier?) passieren? Mein Punkt ist, wenn Ihr server erwartet, dass dieses format BEKOMMEN, die Sie beheben sollten, in ia service. Einen router aufrufen, wird nur die route dieser Daten in eine andere Komponente, wo Sie sich Parsen es wieder usw. Vielleicht bin ich auch nicht verstehen, was Sie versuchen zu erreichen..
Gut @MikeOne, ich bin die beabsichtigen, das zu tun etwas ähnliches wie die Airbnb-Website. Wie ändern Sie Ihre such-Einstellungen in dem Suchformular-Komponente, die URL der Seite ändert sich entsprechend, um diese Präferenzen. Und dann die Wichtigste Komponente, der abonniert die ActivatedRoute, ein Aufruf an den Dienst mit der queryParams. Und der Service macht einen Aufruf an die API. Die API gibt Json-Daten. Diese Json-Daten gesendet zurück zu der Haupt-Component über ein Abonnement. Und die Wichtigste Komponente stellt die Daten in der Vorlage. Vielleicht klingt kompliziert, aber Es ist ziemlich einfach.
Ich verstehe, was Sie wollen, ich denke, aber warum verwenden Sie speziell, dass sich wiederholende Daten-format in den GET-string (airbnb nicht!)

InformationsquelleAutor Antop | 2017-02-23

angular angular-routing

2

Gibt es keine Möglichkeit, dies zu tun, gerade jetzt.

Wenn Sie verfolgen den router code selbst Anfang von router#navigate () können Sie sehen, dass create_url_tree#Baum () - Funktion erstellt einen Baum mit stringified queryParams:
```
function tree(oldSegmentGroup, newSegmentGroup, urlTree, queryParams, fragment) {
  if (urlTree.root === oldSegmentGroup) {
    return new UrlTree(newSegmentGroup, stringify(queryParams), fragment);
  }
  return new UrlTree(replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), stringify(queryParams), fragment);
}
```
Und stringify() macht die ganze schmutzige Arbeit:
```
function stringify(params) {
  var /** @type {?} */res = {};
  forEach(params, function (v, k) { return res[k] = "" + v; });
  return res;
}
```
Ergebnis der Verkettung von string-und array-eine Komma-getrennter string.

Gibt es ein paar Themen über mehrere query-Parameter mit dem gleichen Namen wurde behoben,https://github.com/angular/angular/pull/11373.
Wie Sie sehen können, verändert url_tree#serializeQueryParams() macht genau das, was Sie brauchen. Aber das problem ist, dass die Serialisierung erfolgt viel später, als der Baum gebaut werden.

Scheint es, dass dies ein bug in create_url_tree#Baum() - es sollte nicht stringify-query params, denn es ist der Bereich der Verantwortung von url_tree#serializeQueryParams(). Ich habe Sie entfernt aufrufen zu stringify() lokal und angefangen hat alles so funktioniert wie es sollte.

Als Problemumgehung können Sie stringify jedes query-parameter manuell mit JSON.stringify(queryParamArray), bevor er an router#naviagate (), und parse es mit JSON.parse(param) in der route.queryParams.subscribe(). URL sieht schrecklich aus, aber jetzt ist es die einzige Möglichkeit, arrays zu übergeben.

UPDATE: ich habe die Frage in das eckige-repository: https://github.com/angular/angular/issues/14796

Vielen Dank für deine Hilfe @alexander-pisarev! Ich halten Sie warten auf die Lösung des Problems
Ja, es ist möglich! Sie können wählen Sie Extras und funktioniert perfekt

InformationsquelleAutor Alexander Pisarev

können Sie die navigation extras hoffe, dies könnte Ihnen helfen:

import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';

function(){
 let extra: any = [];


  let navigationExtras: NavigationExtras = {
      queryParams:extra
    };

 this.router.navigate(['/Questions'], navigationExtras);
}

InformationsquelleAutor Shailesh kala

0

Können Sie übergeben Sie als Elemente in der router-Befehle array:
```
[routerLink]="['/Questions', {queryParams: {id:1234, pageid:0}} ]"
```
Siehe auch https://angular.io/docs/ts/latest/guide/router.html#!#query-Parameter

Sorry Rakesh, ich wollte, es zu tun in der Komponente, nicht in der Vorlage. Eh, das ist genau die Weise, die ich Tat, war, vorbei queryParams an den Router über ein Objekt

InformationsquelleAutor Rakesh Samal

Yo, kann dies so tun:

let object1 = {
  'name':'Charles',
  'age':21,
}

let params = {
  'student':JSON.stringify(object1),
  'carreer':'law',
}

this.router.navigate(['/the-route'], {queryParams: params});

und wenn die 'Schüler' param, die Sie gerade ANALYSIEREN, wie diese:

let student = JSON.parse (params['student']);

und das ist es!

InformationsquelleAutor Ari Waisberg

-1

Nicht viel mit der Frage, aber könnte helfen, Menschen, die zu dieser Frage von Google und sind auf der Suche darüber, wie Sie übergeben Sie ein array an routerLink; also ist diese Antwort könnte Ihnen helfen.

betrachten Sie dieses Beispiel:
```
<a [routerLink]="['news', newsId, newsTitle]">
```
das erste Element (news) ist ein text, weil es in Anführungszeichen, und die anderen beiden Elemente sind Variablen, die möglicherweise in einem ngFor

InformationsquelleAutor M98

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.