Wie bekomme ich GET Parameter in Angular2?

Question

Durch den Zugriff auf myproject.dev/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a, Angular2 Punkt die URL myproject.dev/people

Hier ist meine RouteConfig:

@RouteConfig([ 
    { 
     path: '/people', 
     name: config.route.main, 
     component: MainComponent, 
     useAsDefault: true 
    } 
]) 

In MainComponent:

/// <reference path="../../../typings/angular2.d.ts" /> 

import {Component, Injector} from 'angular2/core'; 
import {ROUTER_DIRECTIVES, Router, RouteParams} from 'angular2/router'; 
import {BaseResourceComponent} from '../../Component/BaseResourceComponent'; 
import {Status as MainStatus} from '../../reusable/modules/status.svc'; 

import {Status} from '../../reusable/modules/status.svc'; 
import {Config} from "./Config"; 

import URI from 'urijs'; 

export class MainComponent extends BaseResourceComponent { 
    constructor(config: Config, status: Status, mainStatus: MainStatus, private router: Router, private routeParams: RouteParams) { 
     super(config, status, mainStatus); 
    } 

    onInit() { 
     var path = new URI(window.location.href); 
     path.setQuery('filter[industry]', 'fashion'); 
     path.setQuery('filter[startWith]', 'a'); 

     console.log(path); 
     console.log(this.router); 
     //this.router.root.lastNavigationAttempt = "/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a" 

     console.log(this.routeParams); 
     // this.routeParams returns {params: Object} 
     // this.routeParams.params.get('filter') return null 
    } 
} 

ich es noch kann von this.router.root.lastNavigationAttempt zu bekommen, aber das ist eine Art der knifflige Weg, es nur zu bekommen. Gibt es einen besseren Weg, um die GET-Parameter zu erhalten?

Answer 1

@ Günter Zöchbauer korrekt ist. Untergeordnete Route kann nur matrix parameter, aber nicht query parameter verwenden.

Answer 2

In der Wurzelkomponente Sie den Router injizieren kann und abonnieren, erhalten dann auf Ereignisse entlang der Route, die params vom Router wie

export class AppComponent { 
    constructor(private router:Router) { 
    router.subscribe(route => { 
     console.debug(this.router.currentInstruction.component.params); 
    }); 
    } 
} 

auf Komponenten vom Router hinzugefügt Sie RouteParams direkt wie

export class Other{ 
    constructor(private routeParams: RouteParams) { 
    console.debug(this.routeParams); 
    console.log(this.routeParams.get('filter_industry')); 
    console.log(this.routeParams.get('filter_start_with')); 
    } 
} 

injizieren

Plunker example

Answer 3

Meine Lösung: sicherlich nicht der beste Weg t es odo aber es funktioniert: Ich gehe davon aus, dass Sie diese Sippe url haben: http://localhost:8080/contextPath/index.html?login=true#token_type=Bearer&expires_in=9999&access_token=xxxXXXXXxxx

//get base url to get the token 
if 

(this.location == "") 

{ 
    console.log("traitement location"); 
    this.location = location.href; 
} 

//extract all : 
if (this.location != "") { 
    console.log("traitement token"); 
    this.login = this.location.split("?")[0].split("=")[1]; 
    this.token_type = this.location.split("?")[1].split("#")[1].split("&")[0].split("=")[1]; 
    this.expire_in = +this.location.split("?")[1].split("#")[1].split("&")[1].split("=")[1]; 
    this.setLocalDateValid((this.expire_in + this.nowDate()).toString()); 
    this.token = this.location.split("?")[1].split("#")[1].split("&")[2].split("=")[1]; 
} 

// then store it 
this.setLocalToken(this.token); 

sicher nicht der beste Weg, es zu tun, aber es sehr gut funktionieren :)