Angular 2 ngOnInit не вызывается при изменении маршрутизатора

Question

У меня есть строка меню, которая содержит список меню, загруженных из экспресс-API, и каждое меню ссылается на страницу с псевдонимом, который будет URL-адрес этой страницы, я пытаюсь загрузить страницу, когда я нажимаю на меню, это сделано но только когда я обновляю страницу, это мой код меню

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();
}

}

и это мой шаблон меню

<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 -->

Я думаю, что проблема в ngOnInit моего компонента страницы, он не называется

    @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);
        });
    }

}

и это мой шаблон страницы

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

это мой код маршрутизации приложения

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 {}

это мой компонент приложения

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

})
export class AppComponent {

}

Дом приложения с панелью меню

Answer 1

Вот пример кода того, о чем говорит Гюнтер:

  constructor(private route: ActivatedRoute) { }

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

Этот код отслеживает изменения параметров и выполняет любой код внутри функции стрелки.

Answer 2

Когда изменяется только параметр маршрутизатора, но база маршрута остается прежней, Angular повторно использует компонент. ngOnInit() вызывается только один раз после создания экземпляра компонента, но не при изменении маршрута.

Вы можете добавить маршрутизатор и подписаться на его события или параметры, чтобы получать уведомления об изменениях маршрута.

Answer 3

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

 constructor(
   private router: Router
 ) { }

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

Answer 4

Ну, это исправлено благодаря @Günter Zöchbauer и @DeborahK. Я изменил код компонента страницы с этого

     @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);
        });
    }
}

к этому

    @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);
        });
    }
}