Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I have a select element that generates options by a for loop:

 <select (change)="setSelectedSome($event.target.value)">
     <option *ngFor="#some of Something" [selected]="SelectedSome == some" [value]="some.path" (click)="navigate(some.path)">{{some.name}}</option>
 </select> 

Based on the choice, i need to navigate to a component. I would prefer to use [routerLink], but that seems to be not working due to the parsing of static string as the value. So with dynamic navigation, it seems that i can't inject the router into the constructor. Following is the error:

EXCEPTION: Cannot resolve all parameters for 'Router'(RouteRegistry, Router, ?, Router). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Router' is decorated with Injectable.

here is the component:

/// <reference path="angular2/router.d.ts" />

import {Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, LocationStrategy, HashLocationStrategy} from 'angular2/router';

@RouteConfig([
    { path: '/', name: 'Page', component: Page },
])
@Component({
    providers: [Router],
    directives: [ROUTER_DIRECTIVES],
    selector: 'page',
    template:
    '<div>
        <select (change)="setSelectedSome($event.target.value)">
           <option *ngFor="#some of Something" [selected]="SelectedSome == some" [value]="some.path" (click)="navigate(some.path)">{{some.name}}</option>
        </select>
        <router-outlet></router-outlet>
    </div>'
})
export class Page {
    constructor(private _router: Router) { }

    Something= [{path:'/Some', name: 'I'm Something!'];
    SelectedSome = this.Something[0];

    setSelectedSome(value) {
        this.SelectedSome = value;
    }

    navigate(routeName) {
        //Here i need to navigate, or if you can tell me how to use routerLink binding even better!
        this._router.navigate(routeName);
    }
}

bootstrap(Page, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]);

What i've tried:

1. Removed the private keyword from the constructor, but _router becomes inaccessible in navigate(routeName) method.

2. Added Inject to the list of imports from the Angular2/core. Then changed the constructor to following:

constructor(@Inject() _router: Router) 
{ 
}

Still none worked. How can i fix this?

share|improve this question
up vote 1 down vote accepted

Remove the following line:

providers: [Router]
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.