Angular 2 ngOnInit不会在routerlink更改时调用

Question

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

我认为这个问题是在我的页面组件的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 { 

} 

Home of application with the menu bar

Answer 1

这里是甘谈论的代码示例：

constructor(private route: ActivatedRoute) { } 

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

此代码手表参数的改变并执行箭头的功能中的任何代码。

Answer 2

当只有一个路由器参数的变化，但路线的基础保持不变，角重用的组件。 ngOnInit()仅在组件实例化后调用一次，但在路由更改时不调用。

您可以注入路由器并订阅它的事件或参数以获取有关路由更改的通知。

Answer 3

那么它固定感谢@君特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 { 
     debugger; 
     this.pageService.getPage(this.alias).subscribe(page => { 
      this.page = page; 
      console.log(this.page); 
     }); 
    } 
}