我正在尝试运行使用深度路由的Angular2 beta示例,但是route.navigate()
不起作用,如果我使用routeLink,它在同一路径上工作
@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')
]
在html模板中,如果我使用routeLink,它将起作用:
<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>
提前致谢。
答案 0 :(得分:1)
我认为你以错误的方式使用navigate
方法。这是一个示例:
this._router.navigate( [ 'Details', { /* parameters */ }] );
Details
对应于name
中定义的路由名称@RouteConfig
。
所以我认为在你的情况下你应该有类似的东西:
this._router.navigate([item.name]);
关于router-link
指令,语法如下(来自Angular doc):
<a [routerLink]="['./User']">link to user component</a>
在您的情况下,我认为item.name
不是您路线的路径,而是名称......
希望它可以帮到你, 亨利