Angular 角度2 ngOnInit在routerlink更改时不调用

我有一个菜单栏，其中包含从express 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 -->

这是我的页面模板

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

这是我的应用程序组件

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

})
export class AppComponent {

}

@组件({
选择器：“我的应用程序”，
模板：`

`
})
导出类AppComponent{
}

---

当只有一个路由器参数改变，但路由的基础保持不变时，Angular将重用该组件<代码>ngOnInit（）仅在实例化组件后调用一次，但在路由更改时不会调用

---

您可以插入路由器并订阅其事件或参数，以获得有关路由更改的通知

下面是Gunter所说的代码示例：

  constructor(private route: ActivatedRoute) { }

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

---

此代码监视参数的更改并执行arrow函数中的任何代码。

由于@Günter Zöchbauer和@DeborahK，它得到了很好的修复 我改变了这个页面的组件代码

@组件({
选择器：“页面”，
templateUrl:“./page.component.html”
})
导出类PageComponent实现OnInit{
别名：字符串；
第页：第页；
构造函数（专用路由器：路由器、，
专用路由：激活的路由，
专用页面服务：页面服务）{
this.route.params.subscribe(
（参数：参数）=>{
this.alias=params[“alias”]；
console.log（this.alias）
}
);
}
ngOnInit（）：void{
调试器；
this.pageService.getPage（this.alias）.subscribe（page=>{
this.page=page；
console.log（本页）；
});
}
}

对这个

@组件({
选择器：“页面”，
templateUrl:“./page.component.html”
})
导出类PageComponent实现OnInit{
别名：字符串；
第页：第页；
构造函数（专用路由器：路由器、，
专用路由：激活的路由，
专用页面服务：页面服务）{
this.route.params.subscribe(
（参数：参数）=>{
this.alias=params[“alias”]；
this.pageService.getPage（this.alias）.subscribe（page=>{
this.page=page；
console.log（本页）；
});
console.log（this.alias）
}
);
}
ngOnInit（）：void{
this.pageService.getPage（this.alias）.subscribe（page=>{
this.page=page；
console.log（本页）；
});
}
}

顺便说一下。秩序问题。您的应用程序中没有任何路由通过

PageComponent

？甚至包括主页、菜单或联系人。我的意思是，更具体的路径应该在顶部，下面更宽。我无法从您的问题中得出截取的代码/html属于哪个组件，也无法得出路径名称

menu.page.alias

可能会返回。Sharikov Vladislav，是的，所有菜单url都从别名传递到PageComponent，我的问题是，当我在菜单列表中单击时，页面内容未加载，但当我刷新页面时，页面内容已加载是的，但如何加载？我应该用别的东西来代替ngOnInit吗？例如，解析程序？您可以插入

路由：ActivatedRoute

并订阅

路由。订阅（…）

Ups，我忘记了`route.*params**.subscribe。Deborah还是显示了完整的代码。我认为她的回答至少赢得了一张赞成票；-）很高兴听到你无论如何都能成功。很高兴它能为你成功。考虑将代码从构造函数移到nGuniIT。获取数据的代码不应位于构造函数中。另外，您不需要在ngOnIt中重复getPage方法调用！是 啊我忘了删除它。感谢您提供的链接：

subscribe将只接受一个参数：下一个处理程序（函数）或观察者对象。

我只传递一个参数，因此上面的语法应该仍然可以。

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

})
export class AppComponent {

}

  constructor(private route: ActivatedRoute) { }

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