I am working in angular4 project.In the project,I need to display list of data in a component in cards format.When user click on a card,I need to navigate the user to details page of that particular card.For that one,I am passing params in router navigate containing id and name.My problem is,in the details page URL,card name is displaying along with id.But I need to display only name and have to hide id.I have tried location.replaceState.It doesnot works on page refreshing,as I need id for getting data of the card.Is there any other ways for hiding particular data(id) in the URL in angular2?
Asked
Active
Viewed 3,776 times
0
-
Why don't you encode `id` before adding it to route parameter? – Amit Chigadani Jun 08 '18 at 06:04
-
I just need to hide the id.It shouldn't display in URL.That is the requirement – srujana Jun 08 '18 at 06:21
-
Then rather than adding `id` to url and the hiding it. Its better you don't add id to the url string, instead you pass that as a data to the route path. – Amit Chigadani Jun 08 '18 at 06:22
-
But in that way also id will displayed in the url as object format – srujana Jun 08 '18 at 06:24
-
No, it wont be added to the url, it is simply passed to the component. Wait I am making an answer for that. – Amit Chigadani Jun 08 '18 at 06:26
-
Why not use a service to shared the id, and navigate to "name"?. So, you can get the id from the service and the name from the params. – Eliseo Jun 08 '18 at 06:30
-
Service in the sense? – srujana Jun 08 '18 at 06:36
-
how to pass data to router path? – srujana Jun 08 '18 at 07:03
2 Answers
0
Probably what you are looking for is, you want the id based on the route/:name inside the component, that is invoked after the route.
You can try this way :
Your route path :
{ path: 'home/:name', component: MyComponent, data {id : 2} },
component file
constructor (private _router : Router, private _route : ActivatedRoute)
this._router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(
() => {
console.log(this._route.snapshot.data) // should print {id : 2}
}
);
Amit Chigadani
- 28,482
- 13
- 80
- 98
0
Here is the Example for you hide and pass your data to other page iam allready explained to someone and marked as answer.
Passing a variable between two components without inheritance angular 2
pls visit it is useful for you to achieve your logic.
Happy codding.
Karnan Muthukumar
- 1,843
- 1
- 8
- 15
-
Thanks for the answer.I have tried by using service.But on sharing url to someone,the data in service or app component variable will be cleared so,the other person will not get any data.In this case (sharing url), how can I store the value permanently? – srujana Jun 08 '18 at 13:00
-
local storage is available that one not cleared temporarily. pls try this one – Karnan Muthukumar Jun 08 '18 at 13:02
-
pls visit this link i have answer about local storage.. https://stackoverflow.com/questions/40589730/local-storage-in-angular-2/46562398#46562398 – Karnan Muthukumar Jun 08 '18 at 13:04
-
location storage is limited to one system.But if the shared url is opened in another system,then location storage won't work right? – srujana Jun 08 '18 at 13:07
-
yes not shared one system to another system you are right. But your question is "Is there any other ways for hiding particular data(id) in the URL in angular2" – Karnan Muthukumar Jun 08 '18 at 13:09
-
thats why iam replied possible things of related to your question. – Karnan Muthukumar Jun 08 '18 at 13:10
-
ok.I found different solutions for my question and raised with this different constraints – srujana Jun 08 '18 at 13:24