it-roy-ru.com

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

В моем routable component у меня есть

@RouteConfig {
  {path: '/login',   name: 'Login', component: LoginComponent}
}  

Но как мне получить параметры запроса, если я перейду к app_url/login?token=1234?

60
monty_lennie

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

Давайте возьмем образец:

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

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

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

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

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

UPDATE: После изменений в маршрутизаторе alpha.31 параметры http запроса больше не работают ( Matrix params # 2774 ). Вместо углового маршрутизатора используется так называемая матричная URL-нотация.

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

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

44
Thierry Templier

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

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

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

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

}

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

40
Jayantha Lal Sirisena

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

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

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

}
15
brando

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

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

  constructor(
     private route: ActivatedRoute
  ) { }

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

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

4
marcel

(Только для маршрутов для детей, например,/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

4
Wetteren Rémi

Для Angular 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

2
Amir

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#!#activation-route

2
Ally

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

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

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

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

Согласно 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');
   }
}
1
suvroc

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

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

Цитата из Angular Docs

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

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

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

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

}
0
William Hampshire