Angular - RouteParams

Question

I am currently testing Angular Alpha 45, especially Routing, and got problems doing routing with parameters. I created a component for my detailed view for one specific object.

@Component({ templateUrl: 'app/components/projekt/projekt.detail.html', directives: [FORM_DIRECTIVES] }) export class ProjektDetailComponent { id: string; constructor(params: RouteParams){ this.id = params.get('id'); } } 

The template looks like this: just display the id parameter: <h1>Projekt Details: {{id}}</h1> RouteConfig looks like this:

 @RouteConfig([ { path: '/', component: StartComponent, as:'Start'} , { path: '/projekte', component: ProjektOverviewComponent, as:'Projekte'}, { path: '/projekte/:id', component: ProjektDetailComponent, as:'ProjektDetail'}, { path: '/projekte/neu', component: NeuesProjektComponent, as:'ProjektNeu'} ]) 

The link and RouteConfig that appear above are similar to the examples in the Angular documentation. <a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

Therefore, when I go to the detailed view (for example, 127.0.0.1:8080/src/#/projekte/1), I get the following error that appears in my browser console (I tested using Edge, Firefox 42, Chrome 46) :

 EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or annotations. 18:25:41.376 EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or annotations.1 angular2.dev.js:21984:9 BrowserDomAdapter</BrowserDomAdapter.prototype.logError() angular2.dev.js:21984 BrowserDomAdapter</BrowserDomAdapter.prototype.logGroup() angular2.dev.js:21995 ExceptionHandler</ExceptionHandler.prototype.call() angular2.dev.js:4426 PlatformRef_</PlatformRef_.prototype._initApp/</<() angular2.dev.js:19685 NgZone</NgZone.prototype._notifyOnError() angular2.dev.js:10746 NgZone</NgZone.prototype._createInnerZone/errorHandling.onError() angular2.dev.js:10654 run() angular2.dev.js:141 NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669 zoneBoundFn() angular2.dev.js:111 lib$es6$promise$$internal$$tryCatch() angular2.dev.js:1507 lib$es6$promise$$internal$$invokeCallback() angular2.dev.js:1519 lib$es6$promise$$internal$$publish() angular2.dev.js:1490 [4]</</</<() angular2.dev.js:219 NgZone</NgZone.prototype._createInnerZone/<.$scheduleMicrotask/</microtask() angular2.dev.js:10701 run() angular2.dev.js:138 NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669 zoneBoundFn() angular2.dev.js:111 lib$es6$promise$asap$$flush() angular2.dev.js:1301 

Do you have any suggestions?

Answer 1

As @EricMartinez pointed out, you must import RouteParams correctly. I played with my plunger and got exactly the same errors.

I realized that I imported from 'angular2/angular2' and had to import from 'angular2/router'

Here is a plunker that does exactly what you are looking for, but with the "cars" component. Plunker

Answer 2

I also had the same issue when entering my DataService and RouteParams , and I had to use @Inject in the constructor. Here is what I did.

 import {Component, Inject, View} from 'angular2/angular2'; import {RouteParams} from 'angular2/router'; @Component({ selector: 'about' }) @View({ template: 'This is {{id}} about page {{name}}' }) export class AboutComponent { name: string = "Sandeep"; id: number; constructor( @Inject(RouteParams) params: RouteParams) { this.id = +params.get('id'); } } 

Hope this helps you.

Answer 3

In the case of angular -2.rc3 + you can use this snippet.

post.component.ts

 import { Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component( selector: 'projekte' ) export class ProjekteComponent { private id: string; constructor(private route: ActivatedRoute) { } private sub; ngOnInit() { this.sub = this.route.params.subscribe(params => { this.id = params['id']; }); } ngOnDestroy() { this.sub.unsubscribe(); } } 

app.routes.ts

 export const routes: RouterConfig = [ { path: 'projekte/:id', component: ProjekteComponent } ]; export const appRouterProviders = [ provideRouter(routes); ]; 

main.ts

 import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; import { appRouterProviders } from './app.routes'; bootstrap(AppComponent, [ appRouterProviders ]); 

Hope this help!

Answer 4

This is not related to the problem you had, but it is worth saying that you will encounter the same problem when upgrading to Angular2 RC3 ou above. The route has completely changed, so your component will not work again with the same exception.

In RC3 or higher, you will need to rewrite your routes WITHOUT names, and your component will need to import ActivatedRoute from "@ angular / router" to read your parameters. Cm:

 constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.params.subscribe(params => { this.categoryUrl = params['categoryUrl']; }