web-dev-qa-db-ja.com

angular 2のクエリパラメータの処理方法

routable componentには

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

しかし、app_url/login?token=1234に移動した場合、どのようにクエリパラメータを取得できますか？

javascriptjqueryangularangular2-routing
60
monty_lennie

前の2つの答えを補完するために、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 ）。代わりにangularルーターはいわゆるマトリックスURL表記を使用します。

参照 https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters ：

オプションのルートパラメータは「？」で区切られていませんURLクエリ文字列にある「＆」これらはセミコロン「;」で区切られていますこれはマトリックスURL表記です。これまで見たことがないかもしれません。

45
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']

}

ここ はドキュメントです

46
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.（安定）：

ActivatedRouteは、サブスクライブできる観察可能なものを提供します。

  constructor(
     private route: ActivatedRoute
  ) { }

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

これは、ルートが更新されるたびにトリガーされます：/ home/files/123->/home/files/321

5
marcel

（/ hello-worldなどのChilds Routeのみ）

この種の呼び出しを行いたい場合：

/ 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

5
Wetteren Rémi

For Angular 4

RL：

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

角度4：

JS（OG用）およびTSバージョンを以下に含めました。

。html

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

上記では、linkパラメーター配列を使用しています詳細については、以下のソースを参照してください。

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

2
Ally

Angular 6では、次の簡単な方法を見つけました。

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

次に、コンストラクターまたはngInitで直接使用できます。

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

Angular2 documentation によると、次を使用する必要があります。

@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+ Update

Route.snapshotは、ルートパラメータマップの初期値を提供します。観測可能な演算子をサブスクライブまたは追加せずに、パラメーターに直接アクセスできます。書き込みと読み取りがはるかに簡単です：

Angular Docs からの引用

あなたのためにそれを壊すために、ここに新しいルーターでそれを行う方法があります：

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

そして、ログインコンポーネントで（新しい.snapshotが追加されたことに注意してください）：

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

}
1
William Hampshire