Angular2RC4-Primeng Menubar routerlink does not go to my routes after click

Question

I am using Menubar from primeng for my app. I got the Menu showing, but I wasn't able to make the routing working in my app. I set specific link's route say "reports/89", but when I click the menu corresponding to the link it tries to go to the "localhost:3000/r/e/p/o/r/t/s/8/9" which obviously does not exist. I checked the items object containing my menus and the routerLink is correctly pointing at "reports/89". What is going on here and why primeng puts / among every characters in the link. My codes is simple: private items: MenuItem[] = []; filled the array of items with items, labels and routerLinks.

this.items = [
{
"label": "Lookup",
"routerLink": "/reports/79"
},
{
"label": "Reports",
"routerLink": "/reports/89",
"items": [
  {
    "label": "Lab Results",
    "routerLink": "/reports/3"
  },
  {
    "label": "test Results",
    "routerLink": "/reports/4"
  }
]

All the menu shows up correctly but I noticed the href of the span elements built by primeng for the menu items are set to "#". this might be the problem but don't know why is it setting that way cause I am providing my own routerLinks.

I am not doing any routing in my component I thought all will be done in primeng.

Thanks for any helps

Defilade

Answer 1

I found my problem. I was sending the router link in a wrong format, but the thing that trow me off was not getting any error and trying to go that crazy path. Anyway, for anyone else with this issue the routerLink needs to be an array containing the string to the path with "/" at its beginning. So in my case should have been routerLink: ['/reports/1'].

Defilade

Answer 2

You should use box brackets :

this.items = [
  {
    label:'Home',
    icon:'pi pi-fw pi-home',
    routerLink: ['/home']
  }
];

Timikatiming