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 wich will be the URL of tha
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.
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.
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);
});
}
}