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

不起作用

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

是否有将routerlink存储在类中或在运行时创建routerlink？

Answer 1

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

这应该有效：

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

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

1 个答案: