Получив доступ к myproject.dev/people?filter%5Bindustry%5D=finance&filter%5BstartWith%5D=a, Angular2 указывает URL-адрес на myproject.dev/people

Вот мой RouteConfig:

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

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

Я все еще могу получить его от this.router.root.lastNavigationAttempt, но это довольно сложный способ получить его только. Есть ли лучший способ получить параметры GET?

1
tom10271 22 Апр 2016 в 07:27

3 ответа

Лучший ответ

@ Günter Zöchbauer прав. Дочерний маршрут может использовать только matrix parameter, но не query parameter.

0
tom10271 22 Апр 2016 в 14:55

В корневом компоненте вы можете ввести маршрутизатор и подписаться, а затем при событиях маршрута получить параметры от маршрутизатора, например

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

В компоненты, добавленные маршрутизатором, вы можете напрямую ввести RouteParams, например

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

Пример Plunker

0
Günter Zöchbauer 22 Апр 2016 в 05:03

Мое решение: конечно, не лучший способ сделать это, но оно работает: Я предполагаю, что у вас есть такой URL: 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);

Конечно, это не лучший способ, но работает отлично :)

0
Slater 22 Апр 2016 в 10:18