Angularでのコンポーネント通信
序章
この投稿では、Angularのコンポーネント間でデータを渡すための3つの方法と、シナリオに応じて最適なアプローチについて学習します。
1. URLからのデータの受け渡し
前のページが破棄されて別のページに移動しているページから別のページに移動していると考えてください。 渡すデータが多くない場合(オブジェクトのIDなど)、URLを使用してデータを渡すことができます。
AngularのURLを介してデータを渡すには2つの方法があります。
- ルーターパラメータ
- クエリパラメータ
パラメータがコンポーネントに必須である場合は、ルータパラメータを使用する必要があります。 それ以外の場合は、 queryparamsを使用できます。
ルーターパラメータの使用
ルーターパラメータは必須パラメータです。 次のように、ルーターモジュールのURLにパラメーターを登録する必要があります。
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
サービス
id = 28;
constructor (private router: Router) {}
route() {
this.router.navigate(['/list', this.id]);
}
ルーターパラメータの読み取り
ルーティング先のコンポーネントからルーターパラメータを読み取る方法は次のとおりです。
constructor(
private activatedroute: ActivatedRoute
) {
this.activatedroute.params.subscribe(data => {
console.log(data);
})
}
クエリパラメータの使用
クエリパラメータはオプションのパラメータです。 クエリパラメータに個別のURLを登録する必要はありません。
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
サービス
id = 28;
constructor (private router: Router) {}
route() {
this.router.navigate(['/list'], {queryParams: {id: this.id}});
}
クエリパラメータの読み取り
constructor(
private activatedroute: ActivatedRoute
) {
this.activatedroute.queryParams.subscribe(data => {
console.log(data);
})
}
注:この記事で角度ルーターパラメーターの詳細を入手してください。
2. データの受け渡し @Input
と @Output
子から親に、または親から子コンポーネントにデータを渡したい場合は、次を使用できます。 @Input
と @Output
.
<app-child
[jsonData]="data"
(outputData)="data = $event"
></app-child>
ここ data
コンポーネントのコードで初期化された変数です。
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サブジェクトを使用して、オブザーバブルを作成します。
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つの方法は以上です。 次に、いくつかの素晴らしいコンポーネントを構築してください!