Angular2 routing issue

Question

I am trying to run an Angular2 beta sample that uses deep routing, but route.navigate() doesn't work and if i use routeLink it works on the same route

@Component({
 templateUrl: './app/templates/main-menu.component.html',
 directives: [RouterOutlet, RouterLink],
 //providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
 { path: '/operations/...', name: 'Operations', component: OperationsComponent, useAsDefault: true },
 { path: '/quotes', name: 'Quotes', component: QuotesComponent, useAsDefault: false},
 { path: '/customers', name: 'Customers', component: CustomersComponent, useAsDefault: false },
 { path: '/contacts', name: 'Contacts', component: ContactsComponent, useAsDefault: false },
 { path: '/maintenance', name: 'Maintenance', component: MaintenanceComponent, useAsDefault: false }//
])
export class MainMenuComponent implements OnInit{
 constructor(
 private _router: Router,
 private _routerParams: RouteParams
 ) { }
 menus: MenuItem[];
 selectedMenuItem: MenuItem;
 onSelect(item: MenuItem) {
 this.selectedMenuItem = item;
 this._router.navigate[item.name];
 }
export class MenuItem {
 constructor(public id: number, public name: string) { }
}
 export var Menus: MenuItem[] = [
 new MenuItem(1, 'Operations'),
 new MenuItem(2, 'Quotes'),
 new MenuItem(3, 'Customers'),
 new MenuItem(4, 'Contacts'),
 new MenuItem(5, 'Maintenance')
 ]

in the html template if i use the routeLink it will work:

<h1 style="margin-left:15px">Main Menu</h1>
<table>
 <tr>
 <td>
 <ul style="height:1000px">
 <li class="MainMenuItem" *ngFor="#item of menus" (click)="onSelect(item)" [class.MainMenuSelectedItem]="item === selectedMenuItem">
 <div>
 <div style="margin-left:15px; height:15px; width:15px; display:inline-block;
 vertical-align:middle; margin-top:-2px;
 background : linear-gradient(0deg, rgba(168, 213, 237, 1) 0%, rgba(164, 211, 236, 1) 15.72%, rgba(151, 204, 233, 1) 32.68%, rgba(129, 194, 227, 1) 50.24%, rgba(99, 178, 219, 1) 68.19%, rgba(60, 159, 210, 1) 86.27%, rgba(26, 142, 201, 1) 100%);
 box-shadow : 1px 1px 0px rgba(255, 255, 255, 1);">
 </div>
 <a [routerLink]="[item.name]">{{item.name}}</a>
 </div>
 </li>
 </ul> 
 </td>
 <td>
 <div style="width:1450px;height:1000px;background-color:bisque;vertical-align: top;margin-left:-95px"> 
 <router-outlet></router-outlet>
 </div>
 </td>
 </tr>
</table>

Thanks in advance.

• Günter Zöchbauer: What strings do your items array name contain?

Answer 1

I think that you use the navigate method the wrong way. Here is a sample:

this._router.navigate( [ 'Details', { /* parameters */ }] );

Details corresponds to the name of the route (name attribute) defined in the @RouteConfig.

So I think you should have something like that in your case:

this._router.navigate([item.name]);

Regarding the router-link directive, the syntax is the following (from the Angular doc):

<a [routerLink]="['./User']">link to user component</a>

In your case, I think that item.name isn't the path of your route but the name...

Hope it helps you, Thierry

• Islam Shaheen: if i use _router.navigate['Contacts']; it won't work but if i use <a [routerLink]="['Contacts']">Contacts</a> it work properly, what is the difference?
• Thierry Templier: Try this: _router.navigate(['Contacts']);. It should better. navigate is a method so you need ( ... ).