2

I want to get token from url but it return null as value.

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {    
  constructor(private route: ActivatedRoute) { }

    ngOnInit(){  
    const token = this.route.snapshot.paramMap.get('token');
    console.log(token);

and routing.ts

{ path: ':token', component: AppComponent }

i want to grab contents after / in url eg: localhost:4200/content-to-grab any solutions?

Jota.Toledo
  • 27,293
  • 11
  • 59
  • 73
Vishak P
  • 23
  • 2
  • 4
  • Snapshots are discouraged. Use `route.paramMap.subscribe` to get them. –  Nov 15 '18 at 13:44
  • @trichetriche where did you get that from? – Jota.Toledo Nov 15 '18 at 14:19
  • @Jota.Toledo My own understanding and trials (and probably some blogs or articles I can't recall on my own) : snapshots aren't updated on same route navigation or URL params changes, while routes rely on observables and are updated constantly-ish. –  Nov 15 '18 at 14:27
  • so? depending on the use case, accessing the `snapshot` member is completely valid as some members of the `ActivatedRouteSnapshot` dont change on navigation events. For example, static values defined through the `data` property of a `Route` definition. – Jota.Toledo Nov 15 '18 at 14:39
  • @Jota.Toledo, you might want to have a look at the code inside `ngOnInit` in this [StackBlitz Sample](https://stackblitz.com/github/SiddAjmera/AngularTraining?file=src%2Fapp%2Fcomponents%2Fuser-details%2Fuser-details.component.ts). You'll notice that using `snapshot` doesn't give the updated `id`. Also, it's more about making the code uniform so that the the developer doesn't `snapshot.params` on one hand while `subscribe`ing to `route.params` on the other. Most developers aren't really aware about which one to use when. I've personally seen many questions here on SO with the same issue. – SiddAjmera Nov 15 '18 at 15:24
  • At this point, I'm just assuming that you're the one who downvoted all the answers in this thread. If that's the case, it would be really helpful to specify the reason for your downvote. Please forgive me, however, if that's not the case. – SiddAjmera Nov 15 '18 at 15:30
  • @SiddAjmera what makes you think that Im not aware of that? You are missing my point; using `snapshot` is not discouraged. – Jota.Toledo Nov 15 '18 at 15:31
  • @SiddAjmera indeed, as most answers will not solve the issue – Jota.Toledo Nov 15 '18 at 15:41

4 Answers4

2

Your approach is ok, there is another conceptual issue going on:

you are trying to associate a path to the root component.

Most likely, your root module looks like this:

@NgModule({
  imports: [
    RouterModule.forRoot(...)
  ],
  declarations:[
    ...
    AppComponent,
    ...
  ],
  boostrap: [AppComponent]
})
export class AppModule {}

The first instance of AppComponent instantiated by the framework during the bootstraping step will be used as root component, and as a consequence, the injected ActivatedRoute will be sort of "disconected" from that route definition of yours.

Furthermore, instances of AppComponent resolved through the RouterOutlet directive will be aware of your route definition.

You can check this by yourself in the following stackblitz.

The ActivatedRoute instance injected into the first instance of AppComponent wont reflect the route parameters in neither async or sync manner. If you navigate to something like {url}/#/bla, a second instance of AppComponent will be resolved because of the <router-outlet>. The ActivatedRoute instance inject into it will reflect the route parameter values, both sync. and asynchronously.

Jota.Toledo
  • 27,293
  • 11
  • 59
  • 73
  • Hi @Jota.Toledo , sorry for the late response. Actually, I had figured it soon after asking here. Anyways Thanks for the answer.! – Vishak P Jan 31 '19 at 09:54
0

Try to grab it like this.

this.route.snapshot.params["token"]
Celestin Bochis
  • 129
  • 2
  • 5
-1

Change your code to

this.route.paramMap.subscribe(params => { console.log(params.get('token'));})
callback
  • 3,981
  • 1
  • 31
  • 55
-1
ngOnInit(){  
    const token = this.activatedRout.snapshot.params.token;
}
madhukar reddy
  • 119
  • 2