Búsqueda de sitios web

rutas - Angular - RouteParams

Actualmente estoy probando Angular Alpha 45, especialmente el enrutamiento, y tuve problemas al implementar el enrutamiento con parámetros. He creado un componente para mi vista de detalle de una entidad específica.

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

La plantilla se ve así, solo muestra el parámetro "id": <h1>Detalles del Proyecto: {{id}}</h1> La configuración de rutas se ve así:

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

El Link y el RouteConfig, que se muestran arriba, son como los ejemplos en la documentación de Angular. <a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Detalles</a>

Así que cuando navego a la vista de detalle (por ejemplo, 127.0.0.1:8080/src/#/projekte/1) obtengo el siguiente error, que se muestra en la consola de mi navegador (he probado con 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

¿Tienes alguna sugerencia?

Respuesta #1

Como mencionó @EricMartinez, tienes que importar RouteParams correctamente. Estaba jugando con mi plunker y obtenía los mismos errores exactos.

Me di cuenta de que estaba importando desde 'angular2/angular2' y necesitaba importar desde 'angular2/router'

Aquí hay un plunker que hace exactamente lo que estás buscando pero con un componente de "coches". Plunker

Respuesta #2

También tuve el mismo problema al inyectar mi DataService y RouteParams y tuve que usar @Inject en el constructor. Esto es lo que hice.

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

Espero que te ayude.

Artículos relacionados