angular2在模型中存储routerlink

我正在尝试在Angular2中创建一个动态树形菜单。我可以用下面的模板文件angular2在模型中存储routerlink

<template [ngIf]="menuItem"> 
     <li *ngFor="#item of menuItem" [ngClass]="{active: item.active}"> 
      <a (click)="item.toggle()"><i class="{{item.Icon}}"></i>{{item.Name}} <template [ngIf]="item.Level.length >= 1"><i class="{{item.caret()}}"></i></template></a> 
      <template [ngIf]="item.expanded"><template [ngIf]="item.Level.length >= 1"> 
       <ul my_pages_menu_item [menuItem]="item.Level"></ul> 
      </template></template> 
     </li> 
</template>

和存储我的菜单在数组此刻

export var ITEMS: MenuItem[] = [ 
    new MenuItem('Kontrollpanelen', '/control', 'fa fa-bar-chart', '', false, false, []), 
    new MenuItem('Min profil', '/profile', 'fa fa-user', '', true, true, [ 
     new MenuItem('Personlig information', '#', '', '', false, false, [ 
      new MenuItem('Omdömen', '#', '', '', false, false, []) 
     ]) 
    ]) 
];

和路由器的配置让我的菜单出来的页面上进行如下

@RouteConfig([ 
    {path:'/controlpanel', name: 'ControlPanel', component: ControlPanelComponent, useAsDefault: true}, 
    {path:'/profile', name: 'Profile', component: ProfileComponent}, 
])

但我试图添加一个[routerLink]到a-tag没有成功。静态类型：

<a [routerLink]="['Profile']"></a>

工作，但我不知道在编译菜单结构。与

<a [routerLink]="{{item.Link}}> 
<a [routerLink]="['{{item.Link}}']>

会不起作用

我的菜单项类看起来如下

export class MenuItem { 
    constructor(public Name:string, 
     public Link:string, 
     public Icon:string, 
     public CssClass:string, 
     public expanded: boolean, 
     public active: boolean, 
     public Level:Array<MenuItem> 
    ) {} 
}

反正是有存储routerlink类或创建运行时routerlink？

来源

2016-02-09 nks1111

您不能同时使用括号[prop]和=“{{}}”。

这应该工作：

<a [routerLink]="[item.Link]">

来源

2016-02-09 14:34:42

angular2在模型中存储routerlink

回答

相关问题