6

trying create Menu with below code

<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

EXCEPTION: No Directive annotation found on DecoratorFactoryBrowserDomAdapter.logError @ angular2.dev.js:23083 angular2.dev.js:23083 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23083 angular2.dev.js:23083 Error: No Directive annotation found on DecoratorFactory at new BaseException (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:7351:21) at 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) at https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:22371:22 at Array.map (native) at 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) at TemplateCompiler._compileNestedComponentRuntime (https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:24329:63) at https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js:24314:26 at Array.forEach (native)

1 Answer 1

2

You shouldn't use RouteConfig within the directives attribute of your component since it's not a directive but a decorator.

You can notice that the RouterLink directive is contained into ROUTER_DIRECTIVES.

Using this should be enough:

directives: [ ROUTER_DIRECTIVES ]

Moreover your need to configure routes on your component with the @RouteConfig decorator:

@Component({
  selector: 'my-menu',
  templateUrl: 'app/menu/menu.component.html',
  directives: [ROUTER_DIRECTIVES,RouterLink,RouteConfig]
})
@RouteConfig({
  (...)
})
export class MenuComponent implements OnInit {
  (...)
}

Have a look at this link to see how to configure this:

Sign up to request clarification or add additional context in comments.

5 Comments

Tried that, but getting below Error: Component "MenuComponent" has no route config.
Yes because you didn't define routes on your component with RouteConfig decorator. I updated my answer accordingly.
i have defined RouteConfig in app.component.ts, do i need to add in current page as well? getting this error: ORIGINAL EXCEPTION: Child routes are not allowed for "/MaterialFlow". Use "..." on the parent's route path.
Thanks for Answer, i figured out error, i have not created all routelink in routeconfig
Pleased to hear that. I didn't see why you can't use the route configuration of a parent component...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.