Angular 4: url user params capture issue

Question

I'm trying to reset a user's password (create a new one) in this "enter new password" screen, right after the user receiving an email with a token. In my component I use the ActivateRoute to grab the params in the url (token, email, password) and I need these params to send them to the API, but so far, I get "undefined", right on the component. This is the ActivateRoute:

export class NewPasswordComponent implements OnInit {

  public loginValues = new User([]);

  // Constructor & init
  constructor(
    private auth: AuthService,
    private router: Router,
    private userService: UserService,
    private snackBar: MatSnackBar,
    private activatedRoute: ActivatedRoute,

  ) {
    this.activatedRoute.params.subscribe(params => {
      console.log(params['email']);
      console.log(params.email); -> undefined
      this.loginValues.email = params['email'];
      this.loginValues.token = params['token'];
    });
  }

The component method that comunicates with the service (called on submit new password in the HTML)

clientNewPassword() {
    this.userService.newPassword(this.loginValues, passwordSent => {
      this.router.navigateByUrl('/login');
    });
  }

The service:

public newPassword(user: User, callback: (passwordSent: User) => void) {

    return this.restangular
      .all('auth/reset')
      .customPOST(user.toJSONNewPassword())
      .map((res) => res.data)
      .subscribe({
        next: (res: User) => {
          this.user = new User(res);

          callback(this.user);
        },
      });
  }

And the Routes:

//NEW PASSWORD
  {
    path: 'new-password/:email:token',
    component: NewPasswordComponent,
    canActivate: [LoginGuard],
  },

Can someone help me achieve this? Thanks

EDIT:

The URL I'm trying to call:

http://localhost:4200/new-password/email=snapexpress@gmail.com;token=13af5d409878f1dd5ec88049ba82a5549a07deb4

Most likely the error lies withing the path. According to my understanding it should be new-password/:email/:token instead of new-password/:email:token. If this still doesn't work try console.log(params) to see whether there is any value. — DaniS, Dec 13 '17 at 18:33
@DanSthat way I get an error: `Error: Cannot match any routes. URL Segment: 'new-password/email'` — Mellville, Dec 13 '17 at 18:38
Can you please post the url you try to call? The url should look something like: http://localhost// The slash is important. I think you have both values concatinated without a slash. — DaniS, Dec 13 '17 at 18:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161139/discussion-between-danis-and-mellville). — DaniS, Dec 13 '17 at 18:55
Yes I see the issue. Well we have a missunderstanding from two concepts. First of all the current url gives you maximum one parameter as this isn't separated via a slash. My suggestion would be to change the route to: new-password. And then change the url to localhost:4200/ ?email=...&token=... and listen to "queryParams" instead of params on the object activatedRoute. E.g activatedRoute.queryParams.subscribe((params)=>{})... — DaniS, Dec 13 '17 at 19:04
Or you could use the optional parameter syntax described in this post:https://stackoverflow.com/questions/44864303/sending-data-with-route-navigate-in-angular-2 — DaniS, Dec 13 '17 at 19:06

score 0 · Accepted Answer · answered Dec 15 '17 at 11:28

Based on DaniS hints, I managed to figure out the solution. The route must be:

//NEW PASSWORD
  {
    path: 'new-password/:email/:token',
    component: NewPasswordComponent,
    canActivate: [LoginGuard],
  },

And the URL with two params:

http://localhost:4200/new-password/snapexpress@gmail.com/13af5d409878f1dd5ec88049ba82a5549a07deb4

Angular 4: url user params capture issue

1 Answers1