Question

尝试使用以下代码创建菜单

＆＃13;

<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>

＆＃13;

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

＆＃13;

EXCEPTION：在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） at 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） at 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（native）

Answer 1

您不应该在组件的directives属性中使用RouteConfig，因为它不是指令而是装饰器。

您可以注意到RouterLink指令包含在ROUTER_DIRECTIVES中。

使用它应该足够了：

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

查看此链接以了解如何配置：

https://angular.io/docs/ts/latest/guide/router.html

Angular 2 Routerlink in for循环

1 个答案: