Angular 2 RC1: Get parameters from the initial URL used

Question

Some users enter my web app via invitations. so they would have a link that looks something like this: https://example.com/invitaion/12345 where 12345 is their unique invitation number.

When users click the link, and my AppComponent is initialized on the client side by the framework, how do I get the fact that the URL used was "invitation/*" and how do I get the invitation number?

Answer 1

In the new router (>= RC.0) in the AppComponent this can be done with

  import 'rxjs/add/operator/first';
  ....

  constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
    router.changes.first().subscribe(() => {

    let urlTree = this.routeSerializer.parse(location.path());
      console.log('id', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment);
    });
  }

(to get the 2nd segment)

In MyComponent this is easier:

routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void {
  this.id = curr.getParam('id');
}

Answer 2

You'll want to use RouteParams to access that variable, and use it within your Component.

// let's assume you labeled it as `path : '/invitation/:id'` in your @Route setup.

@Route([
    { path : '/invitation/:id', component : MyComponent }
]) 

Now within the Component itself:

import { RouteParams } from '@angular/router';

// Now simply get the ID when injecting RouteParams within your constructor

class MyComponent {
    id: string;
    constructor(_params: RouteParams) {
        this.id = _params.get('id');
    }
}