Angular データ ルーティング 送信
2024-09-11
Angularにおけるルーティングパスを通じたデータ送信について
Angularにおいて、ルーティングはアプリケーション内の異なるページやコンポーネント間をナビゲートするための仕組みです。このナビゲーションの過程で、データを送信することが可能です。
ルーティングモジュールとルートの定義
- ルートを定義します。ルートには、パスとコンポーネントを指定します。
- AppRoutingModuleを作成し、RouterModuleをインポートします。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.componen t';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
expo rt class AppRoutingModule { }
データの送信方法
- データプロパティ
RouterStateSnapshotのdataプロパティを利用します。 - パスパラメータ
URLのパス内に変数を埋め込みます。 - クエリパラメータ
URLの末尾にキーと値のペアを追加します。
クエリパラメータ
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-home',
template Url: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnI nit {
name: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.name = params['n ame'];
});
}
}
URL: http://localhost:4200?name=John
パスパラメータ
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app.about',
templat eUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
}
URL: http://localhost:4200/about/123
データプロパティ
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.c omponent.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
name: string;
constructor(private router: Router) { }
ngOnInit() {
}
navigateToAbout() {
const navigationExtras = {
queryParams: { name: 'John' },
data: { age: 30 }
};
this.router.navigate(['/about'], navigationExtras);
}
}
データの受け取り
受け取るコンポーネントで、ActivatedRouteのqueryParams、params、dataプロパティを使用してデータを取得します。
クエリパラメータの送信と受け取り
送信側コンポーネント (home.component.ts)
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.c omponent.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
name: string;
constructor(private router: Router) { }
ngOnInit() {
}
navigateToAbout() {
const navigationExtras = {
queryParams: { name: 'John' }
};
this.router.navigate(['/about'], navigationExtras);
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
templat eUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
name: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.name = params['n ame'];
});
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.c omponent.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnI nit {
id: number;
constructor(private router: Router) { }
ngOnInit() {
}
navigateToAbout(id: number) {
this.router.navigate(['/about', id]);
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
templat eUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
}
データプロパティの送信と受け取り
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.c omponent.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnI nit {
name: string;
age: number;
constructor(private router: Router) { }
ngOnInit() {
}
navigateToAbout() {
const navigationExtras = {
data: { name: 'John', age: 30 }
};
this.router.navigate(['/about'], navigationExtras);
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
templat eUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
name: string;
age: number;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.data.subscribe(data => {
this.name = data['name'];
this.age = data['age'];
});
}
}
サービスによるデータ共有
- コンポーネント間でサービスを共有することで、データを直接渡すことなくアクセスできます。
- サービスを作成し、データを保存します。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
data: any = { name: 'John', age: 30 };
}
ローカルストレージまたはセッションストレージ
- データを永続的に保存する場合はローカルストレージ、一時的に保存する場合はセッションストレージを使用します。
- ブラウザのストレージ機能を利用してデータを保存します。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
localStorage.setItem ('data', JSON.stringify({ name: 'John', age: 30 }));
}
}
イベントエミッター
- EventEmitterを使用して、コンポーネント間でイベントを発行し、データを伝達します。
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.compone nt.css']
})
export class HomeComponent {
@Output() dataChanged = new EventEmitter<any>();
sendData() {
this.dataChanged.emit({ name: 'John', age: 30 });
}
}
状態管理ライブラリ
- NgRxやAkitaなどの状態管理ライブラリを使用することで、アプリケーション全体でデータを管理し、コンポーネント間で共有できます。
カスタムルーティングストラテジ
- CanActivateやCanDeactivateなどのガードを使用して、ルーティングの際にデータの処理や検証を行います。
選択基準
- アプリケーションの規模
小規模か、大規模か。 - データの複雑さ
単純なデータか、複雑なデータか。 - コンポーネント間の関係
直接関連があるか、間接的に関連があるか。 - データのライフサイクル
永続的な保存が必要か、一時的な保存でよいか。
angular routes angular-router
