wake-up-neo.com

Routenabfrageparameter abrufen

Ich versuche, von RC1 zu RC4 zu migrieren, und ich habe Probleme, Abfrage-String-Parameter zu erhalten. ActivatedRoute-Objekt immer leer.

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

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

Wenn ich auf den Link 'Neu' klicke, werden leere Objekte gedruckt

Objekt {}

Aktualisierte

plunker

typescriptangularobservableangular2-routing
13
izupet

update (2.0.0 final)

(somepath/:someparam/someotherpath) können Sie sie mit _router.queryParams.subscribe(...) abonnieren:

export class HeroComponent implements OnInit {
  constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
    _activatedRoute.queryParams.subscribe(
      params => console.log('queryParams', params['st']));

original

Wenn Sie queryParams anstelle von Routenparametern (somepath/:someparam/someotherpath) möchten, können Sie sie mit _router.routerState.queryParams.subscribe(...) abonnieren:

export class HeroComponent implements OnInit {
  constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
    _router.routerState.queryParams.subscribe(
      params => console.log('queryParams', params['st']));

Plunker-Beispiel

29
Günter Zöchbauer

Ich hatte lange Zeit mit dem gleichen Problem zu kämpfen ... Die Antwort ist knifflig, in der Dokumentation heißt es:

ActivatedRoute: Ein Dienst, der für jede route .__ bereitgestellt wird. Komponente, die routenspezifische Informationen enthält, z. B. Routenparameter, statische Daten, Auflösungsdaten, globale Abfrageparameter und das globale Fragment . Dies wird in hier erwähnt. 

Die Trick-Antwort lautet 'route component', dh ActivatedRoute funktioniert nur für Komponenten, die geroutet werden. Mit anderen Worten, nur die in der Routing-Tabelle beschriebenen Komponenten.

> Lesen Sie die verschleierte offizielle Dokumentation hier . Es wird die Route einer Komponente genannt, die in einer Verkaufsstelle geladen ist. Wir können nur vermuten, was eine Verkaufsstelle ist ...

Ich habe einen kleinen Untersuchungscode geschrieben, um dieses Problem in eigenständiger app.module.ts zu untersuchen:

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

Führen Sie das Modul für den folgenden URI aus:

Viel Glück, hoffe der Code ist demonstrativ.

3
Dudi Boy

Überprüfen Sie die Winkeldokumentation, alles ist da: 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);
       });
0
Avi