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

Ответ 1

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

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

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

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

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

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

Надеюсь, это поможет вам, Thierry

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

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

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

Ответ 2

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

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

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

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

}

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

Ответ 3

Кажется, что 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();
    }
  }
}

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

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

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

Ответ 4

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

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

}

Ответ 5

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

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

/привет-мир Foo = бар &? Фрукты = банан

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

/привет-мир, Foo = бар, фрукты = банан

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

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

Ответ 6

Angular2 v2.1.0 (стабильный):

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

  constructor(
     private route: ActivatedRoute
  ) { }

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

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

Ответ 7

Angular 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

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

Ответ 8

Для 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);
     }); 
  }
}

Консольный выход:

companyId: 100

Ответ 9

В соответствии с 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');
   }
}

Ответ 10

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

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

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

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

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

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

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

}

Ответ 11

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

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

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

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

Ответ 12

Простой способ сделать это в 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>