Angular 2 Routerlink 在 for 循环中
Angular 2 Routerlink in for loop
正在尝试使用以下代码创建菜单
<aside id="left-panel">
<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i>
</span>
<nav>
<ul>
<li *ngFor="#menu of menus" [class.open]="menu === selectedMenu"
(click)="onSelect(menu)"><a [routerLink]="[menu.action]"> <i
class={{menu.icon}}></i> <span class="menu-item-parent">{{menu.displayname}}</span>
<b *ngIf="menu.childrens.length>0"> <em class="fa"
[ngClass]="{'fa-minus-square-o': menu === selectedMenu, 'fa-plus-square-o': menu !== selectedMenu}"></em>
</b>
</a>
<ul *ngIf="menu.childrens" [class.show]="menu === selectedMenu">
<li *ngFor="#submenu of menu.childrens" (click)="onSelect(menu)">
<a> {{submenu.displayname}} </a>
</li>
</ul></li>
</ul>
</nav>
</aside>
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {RouteConfig,RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {MenuService} from './menu.service';
import {Menu} from './menu';
@Component({
selector: 'my-menu',
templateUrl: 'app/menu/menu.component.html',
directives: [ROUTER_DIRECTIVES,RouterLink,RouteConfig]
})
export class MenuComponent implements OnInit {
public menus: Menu[];
public selectedMenu: Menu;
constructor(private _menuService: MenuService) { }
getMenus() {
this._menuService.getMenus().then(menus => this.menus = menus);
}
ngOnInit() {
this.getMenus();
}
onSelect(menu: Menu) { this.selectedMenu = menu; }
}
Getting following error, please suggest
异常:在 DecoratorFactoryBrowserDomAdapter.logError @ angular2.dev.js:23083 上找不到指令注释
angular2.dev.js:23083 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23083
angular2.dev.js:23083 错误:在 DecoratorFactory 上找不到指令注释
在新的 BaseException (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:7351:21)
在 DirectiveResolver.resolve (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:6654:13)
在 RuntimeMetadataResolver.getDirectiveMetadata (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22303:47)
在 https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22371:22
在 Array.map(本地)
在 Array.map (https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js:10:16820)
在 RuntimeMetadataResolver.getViewDirectivesMetadata (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22370:25)
在 TemplateCompiler._compileNestedComponentRuntime (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:24329:63)
在 https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:24314:26
在 Array.forEach(本地)
您不应在组件的指令属性中使用 RouteConfig,因为它不是指令而是装饰器。
您可以注意到 ROUTER_DIRECTIVES.
中包含 RouterLink 指令
使用这个应该足够了:
directives: [ ROUTER_DIRECTIVES ]
此外,您需要使用 @RouteConfig 装饰器在您的组件上配置路由:
@Component({
selector: 'my-menu',
templateUrl: 'app/menu/menu.component.html',
directives: [ROUTER_DIRECTIVES,RouterLink,RouteConfig]
})
@RouteConfig({
(...)
})
export class MenuComponent implements OnInit {
(...)
}
看看这个 link 看看如何配置它:
正在尝试使用以下代码创建菜单
<aside id="left-panel">
<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i>
</span>
<nav>
<ul>
<li *ngFor="#menu of menus" [class.open]="menu === selectedMenu"
(click)="onSelect(menu)"><a [routerLink]="[menu.action]"> <i
class={{menu.icon}}></i> <span class="menu-item-parent">{{menu.displayname}}</span>
<b *ngIf="menu.childrens.length>0"> <em class="fa"
[ngClass]="{'fa-minus-square-o': menu === selectedMenu, 'fa-plus-square-o': menu !== selectedMenu}"></em>
</b>
</a>
<ul *ngIf="menu.childrens" [class.show]="menu === selectedMenu">
<li *ngFor="#submenu of menu.childrens" (click)="onSelect(menu)">
<a> {{submenu.displayname}} </a>
</li>
</ul></li>
</ul>
</nav>
</aside>
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {RouteConfig,RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {MenuService} from './menu.service';
import {Menu} from './menu';
@Component({
selector: 'my-menu',
templateUrl: 'app/menu/menu.component.html',
directives: [ROUTER_DIRECTIVES,RouterLink,RouteConfig]
})
export class MenuComponent implements OnInit {
public menus: Menu[];
public selectedMenu: Menu;
constructor(private _menuService: MenuService) { }
getMenus() {
this._menuService.getMenus().then(menus => this.menus = menus);
}
ngOnInit() {
this.getMenus();
}
onSelect(menu: Menu) { this.selectedMenu = menu; }
}
Getting following error, please suggest
异常:在 DecoratorFactoryBrowserDomAdapter.logError @ angular2.dev.js:23083 上找不到指令注释 angular2.dev.js:23083 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23083 angular2.dev.js:23083 错误:在 DecoratorFactory 上找不到指令注释 在新的 BaseException (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:7351:21) 在 DirectiveResolver.resolve (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:6654:13) 在 RuntimeMetadataResolver.getDirectiveMetadata (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22303:47) 在 https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22371:22 在 Array.map(本地) 在 Array.map (https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js:10:16820) 在 RuntimeMetadataResolver.getViewDirectivesMetadata (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22370:25) 在 TemplateCompiler._compileNestedComponentRuntime (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:24329:63) 在 https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:24314:26 在 Array.forEach(本地)
您不应在组件的指令属性中使用 RouteConfig,因为它不是指令而是装饰器。
您可以注意到 ROUTER_DIRECTIVES.
中包含 RouterLink 指令使用这个应该足够了:
directives: [ ROUTER_DIRECTIVES ]
此外,您需要使用 @RouteConfig 装饰器在您的组件上配置路由:
@Component({
selector: 'my-menu',
templateUrl: 'app/menu/menu.component.html',
directives: [ROUTER_DIRECTIVES,RouterLink,RouteConfig]
})
@RouteConfig({
(...)
})
export class MenuComponent implements OnInit {
(...)
}
看看这个 link 看看如何配置它: