Angularでのコンポーネント通信
序章
この投稿では、Angularのコンポーネント間でデータを渡すための3つの方法と、シナリオに応じて最適なアプローチについて学習します。
1. URLからのデータの受け渡し
前のページが破棄されて別のページに移動しているページから別のページに移動していると考えてください。 渡すデータが多くない場合(オブジェクトのIDなど)、URLを使用してデータを渡すことができます。
AngularのURLを介してデータを渡すには2つの方法があります。
- ルーターパラメータ
- クエリパラメータ
パラメータがコンポーネントに必須である場合は、ルータパラメータを使用する必要があります。 それ以外の場合は、 queryparamsを使用できます。
ルーターパラメータの使用
ルーターパラメータは必須パラメータです。 次のように、ルーターモジュールのURLにパラメーターを登録する必要があります。
app-router.module.ts
const routes: Routes = [ { path: 'list/:id', component: AppListComponent } ];
この例では、list
はルートURLであり、:id
は渡す必要のあるルーターパラメーターであり、AppListComponent
はそのルートにマウントするコンポーネントです。
routerLink
ディレクティブを介したルーターパラメータの通過
<button type="button" [routerLink]="['/list', id]" > Show List </button>
この例では、id
はそのコンポーネントのコードで初期化された変数であり、/list
はナビゲートするルートです。
route
サービスを介したルーターパラメータの通過
app.component.ts
id = 28; constructor (private router: Router) {} route() { this.router.navigate(['/list', this.id]); }
ルーターパラメータの読み取り
ルーティング先のコンポーネントからルーターパラメータを読み取る方法は次のとおりです。
app-list.component.ts
constructor( private activatedroute: ActivatedRoute ) { this.activatedroute.params.subscribe(data => { console.log(data); }) }
クエリパラメータの使用
クエリパラメータはオプションのパラメータです。 クエリパラメータに個別のURLを登録する必要はありません。
app-router.module.ts
const routes: Routes = [ { path: 'list', component: AppListComponent } ];
この例では、list
がルートURLであり、AppListComponent
がコンポーネントです。
routerLink
ディレクティブを介したクエリパラメータの受け渡し
<button type="button" [routerLink]="['/list']" [queryParams]="{id: '24'}" > Show List </button>
この例では、id
がキーで、24
が静的な値です。 変数を介して動的な値を渡すこともできます。
route
サービスを介したクエリパラメータの受け渡し
app.component.ts
id = 28; constructor (private router: Router) {} route() { this.router.navigate(['/list'], {queryParams: {id: this.id}}); }
クエリパラメータの読み取り
app-list.component.ts
constructor( private activatedroute: ActivatedRoute ) { this.activatedroute.queryParams.subscribe(data => { console.log(data); }) }
注:この記事で角度ルーターパラメーターの詳細を入手してください。
2. @Input
および@Output
を介したデータの受け渡し
子から親に、または親から子コンポーネントにデータを渡したい場合は、@Input
および@Output
を使用できます。
app-parent.component.html
<app-child [jsonData]="data" (outputData)="data = $event" ></app-child>
ここで、data
は、コンポーネントのコードで初期化された変数です。
app-child.component.ts
import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-child', template: '' }) export class AppChild implements OnInit { @Input() jsonData; @Output() outputData = new EventEmitter(); constructor() {} ngOnInit() { console.log(this.jsonData); } emitData(data) { this.outputData(data); } }
このようにして、子から親へ、および親から子へデータを渡すことができます。
3. Observablesを使用してサービスを介してデータを渡す
2つのコンポーネントが兄弟である場合、または階層内のコンポーネントのレベルがより離れている場合は、オブザーバブルを使用してデータを渡すためのサービスを使用することをお勧めします。
この例では、 RxJSサブジェクトを使用して、オブザーバブルを作成します。
app.service.ts
import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({providedIn: 'root'}) export class AppService { observer = new Subject(); public subscriber$ = this.observer.asObservable(); emitData(data) { this.observer.next(data); } }
データを送信するには、このサービスのemitData
メソッドを呼び出すことができます。データを取得するには、次のようにsubsciber$
にサブスクライブする必要があります。
constructor(private appService: AppService) {} ngOnInit() { this.appService.subscriber$.subscribe(data => { console.log(data); }); }
結論
今のところ、Angularのコンポーネント間でデータをやり取りする3つの方法は以上です。 次に、いくつかの素晴らしいコンポーネントを構築してください!