Как обрабатывать параметры запроса в angular 2

RouteParams теперь устарели, так что вот как это сделать в новом маршрутизаторе.

this.router.navigate(['/login'],{ queryParams: { token:'1234'}})

и тогда в компоненте login вы можете взять параметр,

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    // Capture the token  if available
    this.sessionId = this.route.queryParams['token']

}

здесь документация

кажется,RouteParams больше не существует, и заменить на ActivatedRoute. ActivatedRoute дает нам доступ к параметрам нотации URL матрицы. Если мы хотим получить строку запроса ? paramaters мы должны использовать Router.RouterState. The традиционные параметры строки запроса сохраняются по всей маршрутизации, что может не быть желаемым результатом. сохранение фрагмента теперь необязательно в маршрутизаторе 3.0.0-rc.1.

import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
  private queryParamaterValue: string;
  private matrixParamaterValue: string;
  private querySub: any;
  private matrixSub: any;

  constructor(private router: Router, private route: ActivatedRoute) { }
  ngOnInit() {
    this.router.routerState.snapshot.queryParams["queryParamaterName"];
    this.querySub = this.router.routerState.queryParams.subscribe(queryParams => 
      this.queryParamaterValue = queryParams["queryParameterName"];
    );

    this.route.snapshot.params["matrixParameterName"];
    this.route.params.subscribe(matrixParams =>
      this.matrixParamterValue = matrixParams["matrixParameterName"];
    );
  }

  ngOnDestroy() {
    if (this.querySub) {
      this.querySub.unsubscribe();
    }
    if (this.matrixSub) {
      this.matrixSub.unsubscribe();
    }
  }
}

мы должны уметь манипулировать ? обозначения при навигации, а также ; нотация, но я только получил матричную нотацию, чтобы работать еще. Элемент plnker это прилагается к последней роутер документации показывает, что это должно выглядеть так.

let sessionId = 123456789;
let navigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

это работало для меня (по состоянию на угловой 2.1.0):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  // Capture the token  if available
  this.sessionId = this.route.snapshot.queryParams['token']

}

(для маршрута ребенка только такие как / hello-world)

в случае, если вы хотите сделать такой вызов :

/ hello-world?фу=бар и фрукты=банан

Angular2 не использует ?, ни & но ;. Поэтому правильный URL должен быть :

/ hello-world;foo=bar; fruit=banana

и чтобы получить эти данные :

import { Router, ActivatedRoute, Params } from '@angular/router';

private foo: string;
private fruit: string;

constructor(
  private route: ActivatedRoute,
  private router: Router
  ) {}

ngOnInit() {
  this.route.params.forEach((params: Params) => {
      this.foo = params['foo'];
      this.fruit = params['fruit'];
  });
  console.log(this.foo, this.fruit); // you should get your parameters here
}

источник : https://angular.io/docs/ts/latest/guide/router.html

Angular2 П2.1.0 (стабильный):

ActivatedRoute предоставляет наблюдаемый можно подписаться.

  constructor(
     private route: ActivatedRoute
  ) { }

  this.route.params.subscribe(params => {
     let value = params[key];
  });

это срабатывает каждый раз, когда маршрут обновляется, а также: /home / files / 123 - > / home / files / 321

угловые 4:

Я включил JS (для OG) и TS версии ниже.

.HTML-код

<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>

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

маршрутизации.js

(function(app) {
    app.routing = ng.router.RouterModule.forRoot([
        { path: '', component: indexComponent },
        { path: 'search', component: searchComponent }
    ]);
})(window.app || (window.app = {}));

searchComponent.js

(function(app) {
    app.searchComponent =
        ng.core.Component({
            selector: 'search',
                templateUrl: 'view/search.html'
            })
            .Class({
                constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) {
                // Pull out the params with activatedRoute...
                console.log(' params', activatedRoute.snapshot.params);
                // Object {tag: "fish"}
            }]
        }
    });
})(window.app || (window.app = {}));

маршрутизации.ТС (отрывок)

const appRoutes: Routes = [
  { path: '', component: IndexComponent },
  { path: 'search', component: SearchComponent }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  ...
})
export class AppModule { }

searchComponent.ТС

import 'rxjs/add/operator/switchMap';
import { OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

export class SearchComponent implements OnInit {

constructor(
   private route: ActivatedRoute,
   private router: Router
) {}
ngOnInit() {
    this.route.params
      .switchMap((params: Params) => doSomething(params['tag']))
 }

дополнительная информация:

"Массив Параметров Связи" https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

"активированный маршрут-одна остановка магазин для информации о маршруте"https://angular.io/docs/ts/latest/guide/router.html#! # активирован-маршрут

Угловое 4

Url:

http://example.com/company/100

Маршрутизатор Путь :

const routes: Routes = [
  { path: 'company/:companyId', component: CompanyDetailsComponent},

]

компоненты:

@Component({
  selector: 'company-details',
  templateUrl: './company.details.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyDetailsComponent{
   companyId: string;

   constructor(private router: Router, private route: ActivatedRoute) {
          this.route.params.subscribe(params => {
          this.companyId = params.companyId;
          console.log('companyId :'+this.companyId);
     }); 
  }
}

Консоль Вывода:

companyId : 100

по данным документация Angular2 вы должны использовать:

@RouteConfig([
   {path: '/login/:token', name: 'Login', component: LoginComponent},
])

@Component({ template: 'login: {{token}}' })
class LoginComponent{
   token: string;
   constructor(params: RouteParams) {
      this.token = params.get('token');
   }
}

Угловой 5 + Обновление

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

цитата Угловое Документы

чтобы разбить его для вас, вот как это сделать с новым роутером:

this.router.navigate(['/login'], { queryParams: { token:'1234'} });

а затем в компоненте входа в систему (обратите внимание на новый .snapshot добавил):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.sessionId = this.route.snapshot.queryParams['token']

}