angular2在模型中存储routerlink答案

【问题标题】：angular2 store routerlink in modelangular2在模型中存储routerlink
【发布时间】：2016-02-09 14:30:05
【问题描述】：

我正在尝试在 Angular2 中创建动态树形菜单。我可以使用以下模板文件在页面上显示我的菜单

<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}}']>

没用

我的 MenuItem 类如下所示

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>
    ) {}
}

有没有办法在类中存储路由链接或在运行时创建路由链接？

【问题讨论】：

标签： dynamic angular angular2-routing

【解决方案1】：

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

这应该可行：

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

【讨论】：