Angular 2 ngOnInit wird nicht aufgerufen, wenn routerlink ändert

Question

Ich habe eine Menüleiste enthalten Menüs von express API geladen und jedes Menü ist auf Seite verwiesen, die einen Alias ​​haben, der die URL dieser Seite sein wird ich versuche, die Seite zu laden wenn ich zum Menü klicken, wird es getan, aber nachdem ich die Seite dieses mein Menü 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(); 
} 

}

und das ist meine Vorlage Menü

auffrischen

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

denke ich, das Problem in der ngOnInit meiner Seite Komponente ist, ist es nicht

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

} 

genannt wird, und das ist meine Seite Vorlage

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

dies ist mein 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 {} 

das ist meine App Komponente

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

}) 
export class AppComponent { 

} 

Home of application with the menu bar

Answer 1

Hier ist ein Codebeispiel dessen, was Gunter spricht:

constructor(private route: ActivatedRoute) { } 

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

Dieser Code für Änderungen der Parameter beobachtet und führt beliebigen Code innerhalb der Pfeilfunktion.

Answer 2

Wenn nur eine Router Parameteränderung ist aber die Basis der Strecke bleibt gleich, Angular wieder verwendet die Komponente. ngOnInit() wird nur einmal aufgerufen, nachdem eine Komponente instanziiert wurde, aber nicht, wenn sich die Route ändert.

Sie können den Router injizieren und seine Ereignisse oder Parameter abonnieren, um sich über Routenänderungen zu informieren.

Answer 3

Nun, es fixiert dank @ Günter Zöchbauer und @DeborahK geändert ich die Seite Component Code aus diesem

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

zu diesem

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