Angulaires - RouteParams

Je suis actuellement en train de tester Angulaire Alpha 45, j'ai particulièrement aimé le Routage, et eu des problèmes par la mise en œuvre de routage avec des paramètres. J'ai créé un composant pour ma vue de détail 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 est à la recherche comme cela, il suffit d'afficher le paramètre "id":
<h1>Projekt Details: {{id}}</h1>
Le 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'}    
])

Le Lien et la RouteConfig, qui est affiché ci-dessus, sont comme les exemples dans l'angle de la documentation.
<a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

Alors, quand je navigue à la vue de détail (par exemple l'adresse 127.0.0.1:8080/src/#/projekte/1) j'obtiens l'erreur suivante qui 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?

Peut-être une question évidente, mais avez-vous importer RouteParams?
oui j'ai importé RouteParams. Il est encore plus curieux. Sur le PC de mon collègue de travail, il fonctionne très bien. Donc je l'ai testé sur mon ordinateur portable, mais il est encore le même problème. Le Code est le même par nos Git-Repo. Alors peut-être que nous avons eu différents tapuscrit des versions de compilateur et que peut-être les causes. Mais dont le son est vraiment étrange.

OriginalL'auteur lux_ | 2015-11-06

12

@EricMartinez mentionné que vous avez à l'importation RouteParams correctement. Je jouais avec mon plunker et a été exactement la même erreur.

J'ai réalisé que je l'importation à partir d' 'angular2/angular2' et a besoin d'importer de 'angular2/router'

Ici est un plunker qui fait exactement ce que vous cherchez, mais avec un "voitures". Plunker

OriginalL'auteur Dennis Smolek

J'ai aussi eu le même problème lors de l'injection de mon DataService & RouteParams et a 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');
    }
}

Espère que ça va vous aider.

OriginalL'auteur Sandeep Kumar

2

Il n'a pas à voir avec la question que vous avez eu, mais sa vaut dire que vous devrez faire face au même problème lors de la migration vers Angular2 RC3 ou supérieur. Le Parcours a complètement changé, de sorte que votre Composant échoue à nouveau de lancer la même exception.

Dans RC3 ou ci-dessus, vous aurez besoin de réécrire vos itinéraires SANS les noms et votre composante devra importer ActivatedRoute de '@angulaire/routeur pour lire vos paramètres. Voir:
```
constructor(private activatedRoute: ActivatedRoute) {

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

}
```
OriginalL'auteur FelipeDrumond

En cas de angulaires-2.rc3+, vous pouvez utiliser ce code.

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

Espérons que cette aide!

Je suis curieux de savoir si il est obligatoire de unsubscribe dans onDestroy ou si les versions les plus récentes Angulaire de la poignée pour nous?

OriginalL'auteur Quy Tang

Vous devez vous connecter pour publier un commentaire.