Angular 2 コンポーネント間データ共有
2024-10-04
Angular 2でコンポーネント間でオブジェクトを渡す方法
Angular 2では、コンポーネント間でデータを共有するさまざまな方法があります。以下は、そのうちのいくつかです。
**@Input()**デコレーター
- 子コンポーネントの入力プロパティにデータをバインドします。
- 親コンポーネントで、子コンポーネントのセレクターを使用して子コンポーネントをテンプレートに埋め込みます。
- 親コンポーネントから子コンポーネントへデータを渡す最も一般的な方法です。
// parent.component.ts
<child-component [data]="myData"></child-component>
// child.component.ts
@Input() data: any;
- 親コンポーネントで、子コンポーネントのイベントをサブスクライブし、イベントハンドラーでデータを処理します。
- 子コンポーネントで、イベントを発行するメソッドを定義し、
@Output()デコレーターで装飾します。 - 子コンポーネントから親コンポーネントへイベントを発行し、データを渡します。
// child.component.ts
@Output() dataChanged = new EventEmitter<any>();
emitData() {
this.dataChanged.emit(this.data);
}
// parent.component.ts
<child-component (dataChanged)="onDataChanged($event)"></child-component>
onDataChanged(data: any) {
// Handle the data
}
サービス
- 各コンポーネントでサービスをインジェクションし、データを共有します。
- 共有したいデータを保持するサービスを作成します。
- 複数のコンポーネント間でデータを共有する場合に便利です。
// data-sharing.service.ts
@Injectable()
export class DataSharingService {
data: any;
}
// component1.component.ts
constructor(private dataSharingService: DataSharingService) {}
// component2.component.ts
constructor(private dataSharingService: DataSharingService) {}
Subject
Subjectをサービス内で作成し、コンポーネントからサブスクライブしてデータを受け取ります。- RxJSのSubjectを使用して、複数のコンポーネント間で非同期にデータをストリームします。
// data-sharing.service.ts
import { Subject } from 'rxjs';
@Injectable()
export class DataSharingService {
private dataSubject = new Subject<any>();
data$ = this.dataSubject.asObservable();
setData(data: any) {
this.dataSubject.next(data);
}
}
// parent.component.ts
<child-component [data]="myData"></child-component>
// child.component.ts
@Input() data: any;
// child.component.ts
@Output() dataChanged = new EventEmitter<any>();
emitData() {
this.dataChanged.emit(this.data);
}
// parent.component.ts
<child-component (dataChanged)="onDataChanged($event)"></child-component>
onDataChanged(data: any) {
// Handle the data
}
複数のコンポーネント間で
// data-sharing.service.ts
@Injectable()
export class DataSharingService {
data: any;
}
// component1.component.ts
constructor(private dataSharingService: DataSharingService) {}
// component2.component.ts
constructor(private dataSharingService: DataSharingService) {}
// data-sharing.service.ts
import { Subject } from 'rxjs';
@Injectable()
export class DataSharingService {
private dataSubject = new Subject<any>();
data$ = this.dataSubject.asObservable();
setData(data: any) {
this.dataSubject.next(data);
}
}
ViewChildren
- 子コンポーネントのインスタンスを使用して、直接データを操作します。
- 親コンポーネントで、
@ViewChildrenデコレーターを使用して子コンポーネントの参照を取得します。
// parent.component.ts
@ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;
ngOnInit() {
this.childComponents.forEach(child => {
child.data = this.myData;
});
}
ContentChildren
- 親コンポーネントから子コンポーネントへ、親コンポーネントのコンテンツプロジェクション内の子コンポーネントにアクセスします。
// parent.component.ts
<ng-content></ng-content>
@ContentChildren(ChildComponent) childComponents: QueryList<ChildComponent>;
ngOnInit() {
this.childComponents.forEach(child => {
child.data = this.myData;
});
}
State Management Libraries
- コンポーネントは状態ストアにアクセスし、データを共有します。
- Redux、NgRx、またはAkitaなどのライブラリを使用して、アプリケーションの状態を中央集約的に管理します。
- 複数のコンポーネント間でグローバルな状態を管理するライブラリを使用します。
angular angular2-directives
