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つの方法は以上です。 次に、いくつかの素晴らしいコンポーネントを構築してください！
