How can I combine two URLSearchParams in Angular/TypeScript?

问题

I have two URLSearchParams objects, and I want to make a third one of those two combined.

For example, I could have

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('orderBy', 'size');
params2.set('order', 'asc');

let params = params1 + params2; // yes, that's illegal, but how to do that?

and I need to have all 4 parameters in the params object.

I wanted to iterate through the object key-value pairs using .entries() method, but TypeScript hides this method. Here is what I've found in lib.dom.d.ts file:

interface URLSearchParams {
    append(name: string, value: string): void;
    delete(name: string): void;
    get(name: string): string | null;
    getAll(name: string): string[];
    has(name: string): boolean;
    set(name: string, value: string): void;
}

declare var URLSearchParams: {
    prototype: URLSearchParams;
    new (init?: string | URLSearchParams): URLSearchParams;
};

So it looks like there's no possible option to iterate through URLSearchParams in TS. Any ideas?

回答1:

You can use appendAll() method see Docs as below,

let params1 = new URLSearchParams();
params1.set('page', 'one');
params1.set('size', 'hundred');

let params2 = new URLSearchParams();
params2.set('orderBy', 'size');
params2.set('order', 'asc');
let params=new URLSearchParams();
params.appendAll(params1);
params.appendAll(params2);
console.log(params)

LIVE DEMO

回答2:

Now that you've worked out it was a definition issue, here are some answers to your other dilemmas.

let params = params1 + params2; // yes, that's illegal, but how to do that?

URLSearchParams get converted into a query string via toString().

let params = params1.toString() + params2.toString();

NB: URLSearchParams create a search query where arrays are converted equivalent to array.toString() eg: q=x%2Cy%2Cz, differing from querystring.stringify() output which maps the key to each value in an array, eg q=x&q=y&q=z. This is something to be aware of if you're merging URLSearchParams via append/appendAll, and have duplicate keys.

To have duplicate keys, behaving more like querystring, create using iterators.

let params = new URLSearchParams([
    ['page', 'one'],
    ['size', 'hundred'],
    ['orderBy', 'size'],
    ['order', 'asc']
]);

Alternatively, params.forEach((value, name[, searchParams]) => {}) is also available to iterate.

Manually setting each key-value misses one of the best features of this constructor - it's parsing capabilities! Any leading ? is ignored from strings great for appending params to a url query string.

let params1 = new URLSearchParams(('?page=one&size=hundred');
let params2 = new URLSearchParams({
    orderBy: 'size',
    order: 'asc'
});

来源：https://stackoverflow.com/questions/45126076/how-can-i-combine-two-urlsearchparams-in-angular-typescript

标签

angular

typescript