Angular Router

Chapter 3. URLs

When using the Angular router, a URL is just a serialized router state. Any state transition results in a URL change, and any URL change results in a state transition. Consequently, any link or navigation creates a URL.

Simple URL

Let's start with this simple URL /inbox/33.

This is how the router will encode the information about this URL:

const url: UrlSegment[] = [
  {path: 'inbox', params: {}},
  {path: '33', params: {}}
];

Where UrlSegment is defined as follows:

interface UrlSegment {
  path: string;
  params: {[name:string]:string};
}

We can use the ActivatedRoute object to get the URL segments consumed by the route:

class MessageCmp {
  constructor(r: ActivatedRoute) {
    r.url.forEach((u: UrlSegment[]) => {
      //...
    });
  }
}