Winkel - RouteParams

Ich bin derzeit am testen der Winkel Alpha 45, escpecially das Routing, und bekam Probleme durch die Implementierung von routing-Parameter. Habe ich eine Komponente für meine detail-Ansicht einer bestimmten Person.

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

Die Vorlage sieht aus wie dies, nur die Anzeige der parameter "id":
<h1>Projekt Details: {{id}}</h1>
Die RouteConfig sieht wie folgt aus:

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

Den Link und die RouteConfig, die oben dargestellt ist, wie die Beispiele in der angular-Dokumentation.
<a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

Also, wenn ich navigieren Sie zu der detail-Ansicht (z.B. 127.0.0.1:8080/src/#/projekte/1) bekomme ich die folgende Fehlermeldung, die angezeigt wird, in der Konsole von meinem browser(getestet hab ich mit Edge, Firefox 42, Chrom 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

Haben Sie irgendwelche Vorschläge?

Vielleicht eine offensichtliche Frage, aber hast du den import RouteParams?
ja habe ich importiert RouteParams. Es kommt noch mehr neugierig. Auf dem PC von meinem Kollege funktioniert es einfach gut. Also getestet habe ich es auf meinem laptop, aber es ist auch das gleiche problem. Der Code ist der gleiche über unser Git-Repo. Also vielleicht haben wir unterschiedliche typescript-compiler-Versionen und das vielleicht verursacht. Aber das Klang wirklich seltsam.

InformationsquelleAutor lux_ | 2015-11-06

12

Als @EricMartinez erwähnt Sie importieren RouteParams richtig. Ich spielte mit meinem plunker und war immer der exakt gleiche Fehler.

Ich merkte, dass ich den Import von 'angular2/angular2' und benötigt für den import aus 'angular2/router'

Hier ist ein plunker, die macht genau das, was Sie suchen, aber mit "cars" - Komponente. Plunker

InformationsquelleAutor Dennis Smolek

Ich habe auch gleiche problem beim Einspritzen von meinem DataService & RouteParams und mußte @Inject im Konstruktor. Hier ist, was ich Tat.

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

Hoffe es wird Euch helfen.

InformationsquelleAutor Sandeep Kumar

2

Es hat nicht zu tun mit der Frage, die Sie hatten, aber es lohnt sich sagen, dass Sie das gleiche problem bei der Migration zu Angular2 RC3 ou höher. Die Strecke hat sich komplett verändert, so dass Ihre Komponente wird wieder scheitern auslösen der gleichen Ausnahme.

In RC3 oder höher benötigen Sie, um schreiben Sie Ihre Wege OHNE Namen und die Komponente wird importieren müssen ActivatedRoute von '@eckig/router", um zu Lesen, Ihre Parameter. Siehe:
```
constructor(private activatedRoute: ActivatedRoute) {

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

}
```
InformationsquelleAutor FelipeDrumond

Im Falle von eckig-2.rc3+, können Sie mit diesem 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
]);

Hoffe diese Hilfe!

Ich bin gespannt, ob es zwingend zu unsubscribe im onDestroy oder wenn neuere Versionen der Eckige Griff, die es für uns?

InformationsquelleAutor Quy Tang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.