web-dev-qa-db-fra.com

Angular - RouteParams

Je teste actuellement Angular Alpha 45, en particulier le routage, et je rencontre des problèmes en implémentant le routage avec des paramètres. J'ai créé un composant pour ma vue détaillée d'une entité spécifique.

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

Le modèle ressemble à ceci, affichez simplement le paramètre "id": <h1>Projekt Details: {{id}}</h1> La RouteConfig ressemble à ceci:

@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'}    
])

Link et RouteConfig, qui sont affichés ci-dessus, sont similaires aux exemples de la documentation angulaire. <a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

Ainsi, lorsque je navigue dans la vue détaillée (par exemple, 127.0.0.1:8080/src/#/projekte/1), le message d'erreur suivant s'affiche dans la console de mon navigateur (j'ai testé avec 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

Avez-vous des suggestions? 

routingtypescriptangular
8
lux_

Comme @EricMartinez l'a mentionné, vous devez importer RouteParams correctement. Je jouais avec mon plunker et obtenais exactement les mêmes erreurs. 

J'ai réalisé que j'importais de 'angular2/angular2' et que je devais importer de 'angular2/router'

Voici un plunker qui fait exactement ce que vous recherchez, mais avec un composant "voitures". Plunker

12
Dennis Smolek

J'ai également eu le même problème lors de l'injection de DataService & RouteParams et j'ai dû utiliser @Inject dans le constructeur. Voici ce que j'ai fait.

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');
    }
}

J'espère que cela vous aidera.

3
Sandeep Kumar

Cela n’a rien à voir avec le problème que vous avez rencontré, mais il est utile de dire que vous devrez faire face au même problème lors de la migration vers Angular2 RC3 ou supérieur. La route a complètement changé, votre composant échouera de nouveau en lançant la même exception.

En version RC3 ou supérieure, vous devrez réécrire vos itinéraires SANS noms et votre composant devra importer ActivatedRoute à partir de '@ angular/router' pour pouvoir lire vos paramètres. Voir:

constructor(private activatedRoute: ActivatedRoute) {

     this.activatedRoute.params.subscribe(params => {
            this.categoryUrl = params['categoryUrl'];

}
2
FelipeDrumond

Dans le cas de angular-2.rc3 + , vous pouvez utiliser cet extrait.

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
]);

J'espère que cette aide!

2
Quy Tang