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

В дополнение к двум предыдущим ответам Angular2 поддерживает как параметры запроса, так и переменные пути в маршрутизации. В определении @RouteConfig, если вы определяете параметры внутри пути, Angular2 обрабатывает их как переменные пути и как параметры запроса, если нет.

Возьмем образец:

@RouteConfig([
  { path: '/:id', component: DetailsComponent, name: 'Details'}
])

Если вы вызываете метод navigate маршрутизатора следующим образом:

this.router.navigate( [
  'Details', { id: 'companyId', param1: 'value1'
}]);

У вас будет следующий адрес: /companyId?param1=value1. Способ получения параметров одинаков как для параметров запроса, так и для переменных пути. Разница между ними в том, что переменные пути можно рассматривать как обязательные параметры, а параметры запроса — как необязательные.

Надеюсь, это поможет вам, Тьерри.

ОБНОВЛЕНИЕ: после изменений в параметрах http-запроса маршрутизатора alpha.31 больше не работают (Параметры матрицы #2774). Вместо этого угловой маршрутизатор использует так называемую матричную нотацию URL.

Ссылка https://angular.io/docs/ts/latest/guide/router.html#!#Optional-route-parameters:

Необязательные параметры маршрута не разделяются знаком "?" и "&", как они должны быть в строке запроса URL. Они разделены точкой с запятой ";" Это матричная нотация URL — то, что вы, возможно, не видели раньше.

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

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

И затем в компоненте входа в систему вы можете взять параметр,

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

}

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

Похоже, что RouteParams больше не существует и заменено на ActivatedRoute. ActivatedRoute дает нам доступ к параметрам нотации URL матрицы. Если мы хотим получить параметры строки запроса ?, нам нужно использовать заголовок Router.RouterState. традиционные параметры строки запроса сохраняются при маршрутизации, что может быть нежелательным результатом. Сохранение фрагмента теперь является необязательным в маршрутизаторе 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();
    }
  }
}

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

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

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

Это сработало для меня (начиная с Angular 2.1.0):

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

}

(только для детского маршрута, такого как /hello-world)

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

/hello-world?foo=bar&fruit=banana

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 v2.1.0 (стабильная версия):

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

  constructor(
     private route: ActivatedRoute
  ) { }

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

Это также срабатывает каждый раз при обновлении маршрута: /home/files/123 -> /home/files/321.

Простой способ сделать это в Angular 7+:

Определите путь в вашем ?-routing.module.ts

{ path: '/yourpage', component: component-name }

Импортируйте модуль ActivateRoute и Router в свой компонент и внедрите их в конструктор.

contructor(private route: ActivateRoute, private router: Router){ ... }

Подпишите ActivateRoute на ngOnInit

ngOnInit() {

    this.route.queryParams.subscribe(params => {
      console.log(params);
      // {page: '2' }
    })
}

Предоставьте его по ссылке:

<a [routerLink]="['/yourpage']" [queryParams]="{ page: 2 }">2</a>

Угловой 4:

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

.html

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

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

routing.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 = {}));

routing.ts (отрывок)

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

searchComponent.ts

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

Activated Route — универсальный магазин информации о маршруте https://angular.io/docs/ts/latest/guide/router.html#!#activated-route

Для Angular 4

Ссылка:

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

Вывод в консоль:

идентификатор компании: 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');
   }
}

Обновление Angular 5+

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

Цитата из документов Angular

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

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

А затем в компоненте входа (обратите внимание на добавление нового .snapshot):

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

}

В Angular 6 я нашел более простой способ:

navigate(["/yourpage", { "someParamName": "paramValue"}]);

Затем в конструкторе или в ngInit вы можете напрямую использовать:

let value = this.route.snapshot.params.someParamName;