CODEWITHSUNDEEP
typescriptangular
user3794166
user3794166

Reputation:

angular2 with typescript inject Router error

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?

Upvotes: 0

Views: 1097

Answers (1)

kemsky
kemsky

Reputation: 15261

Remove the following line:

providers: [Router]

Upvotes: 1

Related Questions