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 which will be the URL of that page. I am trying to load the page when I click to menu, it's done but only when I refresh the page.
this my menu 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();
}
}
and this is my template menu
<nav class="navbar navbar-default">
<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 -->
</nav>
<router-outlet ></router-outlet>
I think the problem is in the ngOnInit of my page component, it's not called
@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);
});
}
}
and this is my page template
<p *ngIf="page" [innerHTML]="page.content" ></p>
this is my 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 {}
this is my app component
@Component({
selector: 'my-app',
template: `
<menu-list></menu-list>
<hr>
`
})
export class AppComponent {
}
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.