angular2 在模型中存储路由器链接

Question

我正在尝试在 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}}']>

不起作用

我的菜单项 class 如下所示

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

是否可以在 class 中存储路由链接或在运行时创建路由链接？

Answer 1

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

这应该有效：

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

angular2 在模型中存储路由器链接

angular2 store routerlink in model

dynamic

angular

angular2-routing