javascript - How to pass data using state when opening a url in a new tab in Angular 8 - Stack Overflow

admin管理员组

文章数量:1401171

I am able to pass data using state when opening a url in the same tab. I used the following snippet.

<a routerLink="/testPage " [state]="{ hello: 'world' }">click here</a>

But, when I try the same with target="_blank" attribute to open in a new tab. I am not able to get the data from state.

<a routerLink="/testPage " [state]="{ hello: 'world' }" target="_blank">click here</a>

I could pass the data using query params. But there is a limitation in size of query string. Is it possible to pass data using state in a new tab ?

I am able to pass data using state when opening a url in the same tab. I used the following snippet.

<a routerLink="/testPage " [state]="{ hello: 'world' }">click here</a>

But, when I try the same with target="_blank" attribute to open in a new tab. I am not able to get the data from state.

<a routerLink="/testPage " [state]="{ hello: 'world' }" target="_blank">click here</a>

I could pass the data using query params. But there is a limitation in size of query string. Is it possible to pass data using state in a new tab ?

• javascript
• angular
• typescript

Share Improve this question Follow edited Nov 2, 2021 at 23:34 Audwin Oyong 2,52133 gold badges1919 silver badges3636 bronze badges asked Jul 17, 2020 at 7:57 varatharajanvaratharajan 23933 silver badges1515 bronze badges 1

• 1 Depending on the size you could use localstorage – shammelburg Commented Jul 17, 2020 at 8:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You have multiple solutions to achieve what you want:

Passing the state in the URL

By putting directly your state object in queryParams input

<a routerLink="/testPage " [queryParams]="{ hello: 'world' }" target="_blank">click here</a>

Then you can retreive your state with:

this.route.snapshot.queryParams

With this method you can get they queryParams as an object and get your state back. The problem is that if you need to add other information to the query, it will interfer with the state you send.

• By encoding the state and sending it in a single parameter of your query

<a routerLink="/testPage " [queryParams]="{ state: encodeURIComponent({ hello: 'world' }) }" target="_blank">click here</a>

Then you can retreive your state with:

decodeURIComponent(this.route.snapshot.queryParams.state)

More information about the function: https://developer.mozilla/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent

The problem with this solution is that you will be limited if the uri is too long (if you have a big state).

Using client side storage system

You can use localStorage, sessionStorage or cookies.

Simply store the state in the localStorage:

localStorage.setItem('state', JSON.stringify(state))

and retreive it:

JSON.parse(localStorage.getItem('state'))

With this solution, do not forget to remove the state from the localStorage just after consuming it.

Using localStorage would solve your problem. This way you can persist data between site reloads and opening different tabs.

You can pass it as query params.

<a routerLink="/testPage " [queryParams]="{ hello: 'world' }" target="_blank">click here</a>

And you access it by using ActivatedRoute:

constructor(private route: ActivatedRoute) {}
...
this.route.snapshot.queryParams // This is what you want to get

本文标签： javascriptHow to pass data using state when opening a url in a new tab in Angular 8Stack Overflow