2017-02-23 46 views
1

Есть ли способ получить этот вид URL в Angular 2?Угловой 2, Как передать массив на маршрутизатор с помощью queryParams

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

Я пытаюсь сделать это, как это должно быть, используя queryParams с Router, но queryParams принимает объект, я не могу это сделать:

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

Потому что, конечно, я не могу использовать одно и то же имя (param[]) несколько раз в объекте

Я боюсь, как это сделать, но не могу найти способ

Я видел это сообщение: Angular 2 pass array to router queryString. Но нет правильных ответов

+0

Я думаю, что вопрос должен быть; зачем вам нужны ваши параметры в этом формате? Router naviagtion предназначен только для локальной навигации, эта ссылка (с параметрами) никогда не будет на сервере. Вы уверены, что ищете локальную навигацию? Или вы хотите сделать здесь вызов сервера (тогда я могу понять формат массива)? – MikeOne

+0

Да MikeOne, я хочу сделать вызов сервера через службу, чтобы получить некоторые данные json – Antop

+0

Через сервис? Хорошо. Вы переходите сюда по заданному маршруту, который, вероятно, использует компонент. Где служение (вы имеете в виду Угловое служение здесь?)? Я хочу сказать, что если ваш сервер ожидает этот формат GET, вы должны разрешить его в сервисе ia. Вызов маршрутизатора просто направит эти данные на другой компонент, где вам придется снова разобрать его и т. Д. Возможно, я не понимаю, чего вы пытаетесь достичь здесь. – MikeOne

ответ

0

Вы можете передать их в качестве элементов в маршрутизаторе команд массива:

[routerLink]="['/Questions', {queryParams: {id:1234, pageid:0}} ]" 

Смотрите также https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

+0

Извините, Ракеш, я хотел сделать это внутри Компонента, а не в Шаблоне. Во всяком случае, именно так я и делал, передавая запросParams на маршрутизатор через объект – Antop

1

Там нет возможности сделать это прямо сейчас.

Если Вы прослеживать код маршрутизатора самостоятельно начинающуюся от маршрутизатора # Navigate(), Вы можете видеть, что create_url_tree # дерево() функция строит дерево с строковой 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); 
} 

И stringify() делает все грязная работа:

function stringify(params) { 
    var /** @type {?} */ res = {}; 
    forEach(params, function (v, k) { return res[k] = "" + v; }); 
    return res; 
} 

Результат конкатенации строки и массива является запятыми строка.

Существует несколько проблем, связанных с несколькими параметрами запроса с тем же именем, которые были исправлены в https://github.com/angular/angular/pull/11373. Как видите, измененный url_tree # serializeQueryParams() делает именно то, что вам нужно. Но проблема в том, что сериализация происходит намного позже, поскольку дерево будет построено.

Похоже, что это ошибка в create_url_tree # tree() - он не должен строгать параметры запроса, поскольку это область ответственности url_tree # serializeQueryParams(). Я удалил вызов stringify() локально, и все начало работать так, как должно.

Как обходной путь Вы можете связать каждый параметр запроса вручную с помощью JSON.stringify (queryParamArray) перед отправкой его на маршрутизатор # naviagate() и проанализировать его с помощью JSON.parse (param) в route.queryParams.subscribe(). URL выглядит ужасно, но теперь это единственный способ передать массивы.

UPDATE: Я создал этот вопрос в угловом хранилище: https://github.com/angular/angular/issues/14796

+0

Спасибо за вашу помощь @ alexander-pisarev! Я продолжаю ждать решения проблемы – Antop

0

вы можете использовать навигационные статисты надеются, что это может помочь вам:

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

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


    let navigationExtras: NavigationExtras = { 
     queryParams:extra 
    }; 

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

Не много, связанным с вопросом, но могут помочь людям, которые приходят на этот вопрос из Google, и ищут, как передать массив routerLink; поэтому этот ответ может им помочь.

рассмотрим следующий пример:

<a [routerLink]="['news', newsId, newsTitle]"> 

первый элемент (news) является текст, потому что это в кавычках, а другие два элемента являются переменными, которые могут быть внутри ngFor

Смежные вопросы