Angular 2 ngOnInit is not called when routerlink changes

Question

I have a menu bar that contain a list of menus loaded from express API and every menu is referenced to a page that have an alias which 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:

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 => this.menus = menus, //Bind to view
                err => {
                    // Log errors if any
                    console.log(err);
                }
            );
    }

    getPage(id):void {
        this.menuService.getPage(id)
            .subscribe(
                page => this.page = page, //Bind to view
                err => {
                    // Log errors if any
                    console.log(err);
                });
    }

    ngOnInit():void {
        this.getMenus();
    }

}

and this is my template menu

<nav class="navbar navbar-default">

    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar"  style="background-color: #97455f">
            <div class="navv">
                <ul *ngFor="let menu of menus">
                    <li class="col-lg-1 col-md-1 col-xs-12 col-sm-12"><a [routerLink]="[menu.page.alias]">{{menu.title}}</a></li>


                </ul>
            </div>
        </div>

    </div><!-- /.navbar-collapse -->
</nav>
<router-outlet ></router-outlet>

I think the problem is in the ngOnInit of my page component, it's not called

    @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) => {
                this.alias = params["alias"];
                console.log(this.alias)
            }
        );
    }

    


    ngOnInit():void {
        debugger;
        this.pageService.getPage(this.alias).subscribe(page => {
            this.page = page;
            console.log(this.page);
        });
    }

}

and this is my page template

    <p *ngIf="page" [innerHTML]="page.content" ></p>

this is my app routing 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 {}

this is my app component

@Component({
  selector: 'my-app',
  template: `
    <menu-list></menu-list>
    <hr>
`

})
export class AppComponent {

}

Home of application with the menu bar

Answer 1

Here is a code example of what Gunter is talking about:

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
     this.route.params.subscribe(
     params => {
        let id= +params['id'];
        this.getProduct(id);
     });
  }

This code watches for changes to the parameters and executes any code inside the arrow function.

Answer 2

When only a router parameter is changes but the base of the route stays the same, Angular reuses the component. ngOnInit() is only called once after a component is instantiated, but not when the route changes.

You can inject the router and subscribe to it's events or params to get notified about route changes.

Answer 3

Well it fixed thanks to @Günter Zöchbauer and @DeborahK I changed the Page Component code from this

@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) => {
                    this.alias = params["alias"];
                    console.log(this.alias)
                }
            );
        }

    ngOnInit():void {
            debugger;
            this.pageService.getPage(this.alias).subscribe(page => {
                this.page = page;
                console.log(this.page);
            });
        }
    }

to this one

@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) => {
                    this.alias = params["alias"];
                    this.pageService.getPage(this.alias).subscribe(page => {
                        this.page = page;
                        console.log(this.page);
                    });
                    console.log(this.alias)
                }
            );
        }
         ngOnInit():void {
            this.pageService.getPage(this.alias).subscribe(page => {
                this.page = page;
                console.log(this.page);
            });
        }
    }

Answer 4

import { Router } from '@angular/router';
...
export class SettingViewComponent implements OnInit {

 constructor(
   private router: Router
 ) { }

 public ngOnInit(): void {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}