title: Angular2 route including id
body: <p>In an Angular2 project, I struggle to make the router works properly.</p>
  
  <p>In our app, we only have the main page and then a project dedicated pages.
   For example, the user access these project pages using a direct link pointing to</p>
  
  <pre><code>http:/ourwebsite.com/#/project/b288ba45-3b41-4862-9fed-7271245b9c29
  </code></pre>
  
  <p>I want, in the header navbar, to create a link pointing to the given component even if the user goes to home after that. </p>
  
  <p>For example: the user goes to his project, then click <code>Home</code>, I want the link <code>See project</code> being able to redirect the user to his previous precise project.</p>
  
  <p><code>My Routes</code>:</p>
  
  <pre><code>export const ROUTES: Routes = [
    { path: 'home',  component: HomeComponent },
    { path: 'project/:uuid',  component: ProjectComponent },
    { path: '',   redirectTo: '/home', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent  }
  ];
  </code></pre>
  
  <p>My <code>app.component.html</code> with nav header:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
      &lt;li&gt;&lt;a [routerLink]="['/home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a [routerLink]="['/project', uuid]"&gt;See a project&lt;/a&gt;&lt;/li
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried this in <code>app.component.ts</code>:</p>
  
  <pre><code>import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  import { Observable, Subscription } from 'rxjs';
  import 'rxjs/Rx';
  
  @Component({
    selector: 'app-root',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit, OnDestroy {
    uuid: string;
    private subscription: Subscription;
  
    constructor(private route: ActivatedRoute) {}
  
    ngOnInit() {
      this.subscription = this.route.params.subscribe(params =&gt; {
         this.uuid = params['uuid'];
         console.log('Route UUID', this.uuid);
      });
    }
  
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  }
  </code></pre>
  
  <p>But the fact is the <code>UUID</code> is printed in console as Undefined as this route is directly accessed from an external link.</p>
  
  <p>I can get the <code>UUID</code> from the <code>project.component.ts</code> but how to pass it to the <strong>routerLink</strong> element in my navbar, which is located in <code>app.component</code>?</p>
  
  <blockquote>
    <p>Use of comment solution:</p>
  </blockquote>
  
  <p>I tried to use <code>[routerLink]="['/project', {uuid: uuid}]"</code> but the produced link url is: /#/think;uuid=undefined</p>
  
  <p>Thanks for your help.</p>