Angular2 Router でクエリ文字列を保持する: 高度なテクニック
Angular2 Router でクエリ文字列を保持する方法
queryParamsHandling オプションを使用する
Angular 8 以降では、preserveQueryParams オプションは非推奨となり、代わりに queryParamsHandling オプションを使用する必要があります。このオプションには、以下の 3 つの値を設定できます。
'replace': 現在のクエリ文字列をルート設定のクエリ文字列で置き換えます。'preserve': デフォルト値。現在のクエリ文字列を保持します。
以下の例は、queryParamsHandling オプションを使用してクエリ文字列を保持する方法を示しています。
this.router.navigate(['/comp1'], { queryParamsHandling: 'preserve' });
ActivatedRoute サービスを使用する
ActivatedRoute サービスは、現在のルートとクエリ文字列に関する情報を提供します。クエリ文字列にアクセスするには、以下のコードを使用できます。
this.activatedRoute.queryParams.subscribe(params => {
console.log(params['paramName']);
});
例
以下の例は、Angular2 Router でクエリ文字列を保持する方法を示しています。
// ルート設定
const routes: Routes = [
{ path: '/comp1', component: Comp1Component },
{ path: '**', component: HomeComponent }
];
// コンポーネント
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private router: Router, private activatedRoute: ActivatedRoute) { }
navigateToComp1() {
this.router.navigate(['/comp1'], { queryParams: { paramName: 'value' } });
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe(params => {
console.log(params['paramName']);
});
}
}
この例では、navigateToComp1 メソッドは /comp1 ルートに遷移し、paramName というクエリパラメータに value という値を設定します。ngOnInit メソッドは ActivatedRoute サービスの queryParams プロパティを購読し、クエリ文字列が変更されたときにコンソールにログを出力します。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private router: Router, private activatedRoute: ActivatedRoute) { }
navigateToComp1() {
this.router.navigate(['/comp1'], { queryParams: { paramName: 'value' }, queryParamsHandling: 'preserve' });
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe(params => {
console.log(params['paramName']);
});
}
}
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private router: Router, private activatedRoute: ActivatedRoute) { }
navigateToComp1() {
this.router.navigate(['/comp1'], { queryParams: { paramName: 'value' } });
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe(params => {
console.log(params['paramName']);
});
}
}
説明
- クエリ文字列が変更されたときに、
params['paramName']の値がコンソールにログ出力されます。 ngOnInitメソッドは、ActivatedRouteサービスのqueryParamsプロパティを購読します。queryParamsHandlingオプションは、preserveに設定されているため、現在のクエリ文字列は保持されます。queryParamsオプションを使用して、paramNameというクエリパラメータにvalueという値を設定します。navigateToComp1メソッドは、router.navigateメソッドを使用して/comp1ルートに遷移します。
- Angular2 Router は、クエリ文字列を簡単に処理するための機能を提供しています。
- クエリ文字列は、異なるページ間でデータを共有するために使用できます。
- クエリ文字列は、URL の
?の後に続く一連のパラメータと値のペアです。
URL パラメータは、クエリ文字列よりも読みやすく、理解しやすい場合があります。ただし、クエリ文字列よりも長くなる可能性があり、URL が長くなりすぎてしまうことがあります。
以下の例は、URL パラメータを使用してクエリ文字列を保持する方法を示しています。
this.router.navigate(['/comp1/:paramName'], { params: { paramName: 'value' } });
サービスを使用する
サービスを使用して、クエリ文字列をアプリケーション全体で共有することができます。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class QueryStringService {
private queryParams: any;
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe(params => {
this.queryParams = params;
});
}
getParamName(): string {
return this.queryParams['paramName'];
}
}
この例では、QueryStringService というサービスを作成しています。このサービスは、現在のクエリ文字列をプロパティ queryParams に格納します。getParamName メソッドは、paramName クエリパラメータの値を返します。
コンポーネントでこのサービスを使用するには、以下のコードを使用します。
import { Component, OnInit } from '@angular/core';
import { QueryStringService } from './query-string.service';
@Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {
constructor(private queryStringService: QueryStringService) { }
ngOnInit() {
console.log(this.queryStringService.getParamName());
}
}
この例では、Comp1Component コンポーネントは QueryStringService をインジェクションし、getParamName メソッドを使用して paramName クエリパラメータの値を取得します。
カスタムディレクティブを使用する
カスタムディレクティブを使用して、クエリ文字列を処理するロジックをカプセル化することができます。
import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
@Directive({
selector: '[appQueryString]'
})
export class QueryStringDirective implements OnChanges {
@Input() paramName: string;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnChanges(changes: SimpleChanges) {
if (changes['paramName']) {
this.activatedRoute.queryParams.subscribe(params => {
console.log(params[this.paramName]);
});
}
}
}
この例では、QueryStringDirective というカスタムディレクティブを作成しています。このディレクティブは、paramName という入力プロパティを受け取ります。ngOnChanges メソッドは、paramName プロパティが変更されたときに呼び出されます。このメソッドは、ActivatedRoute サービスの queryParams プロパティを購読し、クエリ文字列が変更されたときにコンソールにログを出力します。
<div appQueryString paramName="paramName"></div>
この例では、<div> 要素に appQueryString ディレクティブを追加し、paramName 属性に paramName という値を設定します。
- クエリ文字列は、パフォーマンスを向上させるためにキャッシュする必要があります。
- クエリ文字列は、安全に使用するためにサニタイズする必要があります。
- クエリ文字列は、URL エンコードする必要があります。
angular typescript angular2-routing
