Ottieni parametri di interrogazione della rotta

Sto provando a migrare da rc1 a rc4 e ho problemi a ottenere parametri di stringa di query. Oggetto ActivatedRoute sempre vuoto.

hero.component.ts

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 { } 

parziali / main.html

 New 

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

Quando clicco sul link ‘New’ la console stampa un object vuoto

Oggetto {}

aggiornato

plunker

aggiornamento (2.0.0 finale)

( somepath/:someparam/someotherpath ) puoi abbonarti a loro 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'])); 

originale

Se vuoi queryParams invece di route params ( somepath/:someparam/someotherpath ) puoi sottoscriverli 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'])); 

Esempio di Plunker

Ho sofferto per lo stesso problema per molto tempo. La risposta è complicata, nella documentazione è stato affermato:

ActivatedRoute: un servizio fornito a ciascun componente del percorso che contiene informazioni specifiche sul percorso quali parametri del percorso, dati statici, dati di risoluzione, parametri di query globali e il frammento globale. Questo è menzionato qui

La risposta del trucco è “componente di percorso” , ovvero ActivatedRoute funzionerà solo sui componenti instradati. In altre parole, solo i componenti descritti nella tabella di routing.

> Leggendo la documentazione ufficiale offuscante qui . Indica la “rotta associata a un componente caricato in una presa”. Possiamo solo intuire che cos’è uno sbocco …

Ho scritto un piccolo codice investigativo per cercare questo problema in app.module.ts stand alone:

 import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes, ActivatedRoute } from '@angular/router'; @Component({ selector: 'comp1', template: `

comp1 works

`, }) export class Comp1 { } @Component({ selector: 'comp2', template: `

comp2 works

`, }) export class Comp2 { } @Component({ selector: 'fail', template: `
Wrong URL:{{url | json}}

Failure page works

`, }) export class Fail { private url: any; constructor(public activeRoute: ActivatedRoute) { this.url = activeRoute.snapshot.url }; } @Component({ selector: 'app-root', template: `
Base URL:{{url | json}}
`, }) 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 { }

Prova a eseguire il modulo per il seguente URI:

  • http: // localhost: 4200/2
  • http: // localhost: 4200/1
  • http: // localhost: 4200 / a / b / c

Buona fortuna, spero che il codice sia dimostrativo.

controllare la documentazione angular, è tutto lì: 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); });