Estoy tratando de migrar de rc1 a rc4 y tengo problemas para obtener los parámetros de la cadena de consulta. El objeto ActivatedRoute siempre está vacío.
**El problema es que el objeto ActivatedRoute siempre esta vacio.
import {Component, OnInit} from "@angular/core";
import {Control} from "@angular/common";
import {ROUTER_DIRECTIVES, ActivatedRoute} from '@angular/router';
@Component({
template: '../partials/main.html',
directives: [ROUTER_DIRECTIVES]
})
export class HeroComponent implements OnInit {
constructor(private _activatedRoute: activatedRoute) {
}
ngOnInit() {
this._activatedRoute.params.subscribe(params => {
console.log(params);
});
}
}
main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, RequestOptions, Http} from '@angular/http';
import {AppRouterProviders} from './app.routes';
bootstrap(AppComponent, [
AppRouterProviders,
HTTP_PROVIDERS
]);
app.component.ts
import {Component, OnInit} from '@angular/core';
import {HeroComponent} from './hero.component';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector: 'my-app',
templateUrl: '../partials/main.html',
directives: [
HeroComponent,
ROUTER_DIRECTIVES
]
})
export class AppComponent {
}
partials/main.html
<a class="nav-link" [routerLink]="['/']" [queryParams]="{st: 'new'}">New</a>
app.routes.ts
import {provideRouter, RouterConfig} from '@angular/router';
import {HeroComponent} from './hero.component';
import {ErrorComponent} from './error.component';
const routes: RouterConfig = [
{path:'', component: HeroComponent},
{path:'**', component: ErrorComponent}
];
export const AppRouterProviders = [
provideRouter(routes)
];
Cuando hago click en el link 'Nuevo' la consola imprime un objeto vacío
Objeto {}
Actualizado
actualización (2.0.0 final)
(somepath/:someparam/someotherpath
) puedes suscribirte a ellos usando _router.queryParams.subscribe(...)
:
export class HeroComponent implements OnInit {
constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
_activatedRoute.queryParams.subscribe(
params => console.log('queryParams', params['st']));
original
Si quieres queryParams
en lugar de parámetros de ruta (somepath/:someparam/someotherpath
) puedes suscribirte a ellos usando _router.routerState.queryParams.subscribe(...)
:
export class HeroComponent implements OnInit {
constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
_router.routerState.queryParams.subscribe(
params => console.log('queryParams', params['st']));
Estuve luchando con el mismo problema durante mucho tiempo. La respuesta es complicada, en la documentación se indica:
ActivatedRoute: Un servicio que se proporciona a cada componente route que contiene información específica de la ruta, como parámetros de ruta, datos estáticos, datos de resolución, parámetros de consulta globales y el fragmento global. Esto se menciona en aquí
El truco de la respuesta es 'componente de ruta', esto significa que ActivatedRoute funcionará sólo en componentes que estén enrutados. En otras palabras, sólo los componentes descritos en la tabla de enrutamiento.
Escribí un poco de código de investigación para investigar este problema en stand alone app.module.ts:
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
@Component({
selector: 'comp1',
template: `<h4>comp1 works</h4>`,
})
export class Comp1 { }
@Component({
selector: 'comp2',
template: `<h4>comp2 works</h4>`,
})
export class Comp2 { }
@Component({
selector: 'fail',
template: `<div>Wrong URL:{{url | json}}</div> <h4>Failure page works</h4>`,
})
export class Fail {
private url: any;
constructor(public activeRoute: ActivatedRoute) {
this.url = activeRoute.snapshot.url
};
}
@Component({
selector: 'app-root',
template: `<div>Base URL:{{url | json}}</div> <router-outlet></router-outlet>`,
})
export class App {
private url: any;
constructor(public activeRoute: ActivatedRoute) {
this.url = activeRoute.snapshot.url
};
}
const appRoutes: Routes = [
{ path: '1', component: Comp1 },
{ path: '2', component: Comp2 },
{ path: '**', component: Fail }
];
@NgModule({
imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
declarations: [App, Comp2, Comp1, Fail],
bootstrap: [App]
})
export class AppModule { }
Intente ejecutar el módulo para el siguiente URI:
Buena suerte, espero que el código sea demostrativo.
revisa la documentación de angular, está todo ahí: https://angular.io/docs/ts/latest/guide/router.html
constructor(
private route: ActivatedRoute,
private router: Router,
private service: HeroService) {}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
let id = +params['id']; // (+) converts string 'id' to a number
this.service.getHero(id).then(hero => this.hero = hero);
});