title: Angular 2 ngOnInit is not called when routerlink changes
body: <p>i have a menu bar that contain a list of menus loaded from <strong>express api</strong> and every menu is referenced to a page that have an alias wich will be the URL of that page 
  i am trying to load the page when i click to menu, it's done but only when i refresh the page
  this my menu code </p>
  
  <pre><code>export class MenuList implements OnInit {
  
  menus:Menu[];
  menu:Menu;
  page:Page;
  
  constructor(private router:Router,
              private menuService:MenuService) {
  }
  
  getMenus():void {
      this.menuService.getMenus()
          .subscribe(
              menus =&gt; this.menus = menus, //Bind to view
              err =&gt; {
                  // Log errors if any
                  console.log(err);
              }
          );
  }
  
  getPage(id):void {
      this.menuService.getPage(id)
          .subscribe(
              page =&gt; this.page = page, //Bind to view
              err =&gt; {
                  // Log errors if any
                  console.log(err);
              });
  }
  
  ngOnInit():void {
      this.getMenus();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>and this is my template menu</p>
  
  <p></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="navbar"  style="background-color: #97455f"&gt;
          &lt;div class="navv"&gt;
              &lt;ul *ngFor="let menu of menus"&gt;
                  &lt;li class="col-lg-1 col-md-1 col-xs-12 col-sm-12"&gt;&lt;a [routerLink]="[menu.page.alias]"&gt;{{menu.title}}&lt;/a&gt;&lt;/li&gt;
  
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I think the problem is in the ngOnInit of my page component, it's not called</p>
  
  <pre><code>    @Component({
      selector: 'page',
      templateUrl: './page.component.html'
  })
  export class PageComponent implements OnInit {
      alias: string;
      page:Page;
  
      constructor(private router:Router,
                  private route: ActivatedRoute,
                  private pageService:PageService) {
  
          this.route.params.subscribe(
              (params : Params) =&gt; {
                  this.alias = params["alias"];
                  console.log(this.alias)
              }
          );
      }
  
  
  
  
      ngOnInit():void {
          debugger;
          this.pageService.getPage(this.alias).subscribe(page =&gt; {
              this.page = page;
              console.log(this.page);
          });
      }
  
  }
  </code></pre>
  
  <p>and this is my page template </p>
  
  <pre><code>    &lt;p *ngIf="page" [innerHTML]="page.content" &gt;&lt;/p&gt;
  </code></pre>
  
  <p>this is my app routing code </p>
  
  <pre><code>const routes: Routes = [
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: ':alias', component: PageComponent },
      { path: 'archived',  component: ArchivedComponent },
      { path: 'home',  component: HomeComponent },
      { path: 'menu',  component: MenuList },
      { path: 'detail/:id', component: ActualiteDetailComponent },
      { path: 'contact',  component: ContactComponent },
  
  ];
  
  @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>this is my app component </p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;menu-list&gt;&lt;/menu-list&gt;
      &lt;hr&gt;
  `
  
  })
  export class AppComponent {
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WjXGH.png" rel="nofollow noreferrer">Home of application with the menu bar</a></p>