【実践ガイド】Angular 2 コンポーネント間データ共有：サービス、共有ステート、ルーティングなどを活用

Angular 2 でコンポーネント間でデータを共有する方法

@Input と @Output

@Input は、親コンポーネントから子コンポーネントへデータを一方方向に送信するために使用されます。親コンポーネントで @Input() デコレータ付きのプロパティを定義し、子コンポーネントのテンプレートでバインディングすることで、親コンポーネントのプロパティ値を子コンポーネントに渡すことができます。

// 親コンポーネント (parent.component.ts)
export class ParentComponent {
  name = 'Angular 2';
}

// 子コンポーネント (child.component.ts)
export class ChildComponent {
  @Input() name: string;
}

// 子コンポーネント (child.component.ts)
export class ChildComponent {
  @Output() nameChanged = new EventEmitter<string>();

  changeName() {
    this.nameChanged.emit('New Name');
  }
}

// 親コンポーネント (parent.component.ts)
export class ParentComponent {
  name = 'Angular 2';

  constructor(private child: ChildComponent) {
    this.child.nameChanged.subscribe(newName => {
      this.name = newName;
    });
  }
}

サービスは、コンポーネント間で共有するデータやロジックを格納するために使用されます。コンポーネントはサービスをインジェクションすることで、サービスのデータやメソッドにアクセスすることができます。

// サービス (data.service.ts)
export class DataService {
  private data = 'Hello from Service';

  getData() {
    return this.data;
  }

  setData(newData: string) {
    this.data = newData;
  }
}

// コンポーネント (component.component.ts)
export class MyComponent {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    console.log(this.dataService.getData()); // 'Hello from Service' を出力
    this.dataService.setData('New Data');
  }
}

共有ステート

NgRx などのライブラリを使用して、コンポーネント間で共有ステートを管理することもできます。共有ステートは、アプリケーション全体で一貫したデータの状態を維持するのに役立ちます。

ルーティング

コンポーネント間でデータを共有するもう 1 つの方法は、ルーティングを使用することです。コンポーネントに渡すデータをルートパラメータまたはクエリオブジェクトとして格納できます。

// 親コンポーネント (parent.component.ts)
this.router.navigate(['child', { data: { message: 'Hello from Parent' } }]);

// 子コンポーネント (child.component.ts)
constructor(private route: ActivatedRoute) {
  this.message = this.route.snapshot.data['message'];
}

それぞれの方法の使い分け

• @Input と @Output: 親から子へのデータ送信、子から親へのイベント発行に適しています。
• サービス: 共有するデータやロジックが複雑な場合に適しています。
• 共有ステート: アプリケーション全体で一貫したデータ状態を維持する必要がある場合に適しています。
• ルーティング: コンポーネント間で少量のデータを共有する場合に適しています。

どの方法を選択するかは、具体的な要件によって異なります。上記の説明を参考に、それぞれの方法の特徴と使い分けを理解し、適切な方法を選択してください。

Angular 2 でコンポーネント間でデータを共有するサンプルコード

@Input と @Output

1 親から子へのデータ送信

親コンポーネント (parent.component.ts)

export class ParentComponent {
  name = 'Angular 2';
}

<p>名前: {{ name }}</p>

export class ChildComponent {
  @Input() name: string;
}

<child [name]="name"></child>

2 子から親へのイベント発行

export class ChildComponent {
  @Output() nameChanged = new EventEmitter<string>();

  changeName() {
    this.nameChanged.emit('New Name');
  }
}

<child (nameChanged)="onNameChanged($event)"></child>

export class ParentComponent {
  name = 'Angular 2';

  onNameChanged(newName: string) {
    this.name = newName;
  }
}

サービス

サービス (data.service.ts)

export class DataService {
  private data = 'Hello from Service';

  getData() {
    return this.data;
  }

  setData(newData: string) {
    this.data = newData;
  }
}

export class MyComponent {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    console.log(this.dataService.getData()); // 'Hello from Service' を出力
    this.dataService.setData('New Data');
  }
}

共有ステート (NgRx を使用する場合)

NgRx ストア定義 (app.store.ts)

import { Injectable } from '@angular/core';
import { StoreConfig } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

export interface AppState {
  count: number;
}

@Injectable({
  providedIn: 'root'
})
export class AppStore {
  constructor(
    @StoreConfig({ stateName: 'app', reducer: counterReducer })
    private store: Store<AppState>
  ) {}

  getState() {
    return this.store.select();
  }

  dispatch(action: any) {
    this.store.dispatch(action);
  }
}

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../app.store';
import { increment, decrement } from '../counter.actions';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
  count: number;

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.store.select('count').subscribe(count => (this.count = count));
  }

  onIncrement() {
    this.store.dispatch(increment());
  }

  onDecrement() {
    this.store.dispatch(decrement());
  }
}

<p>カウント: {{ count }}</p>
<button (click)="onIncrement()">+</button>
<button (click)="onDecrement()">-</button>

ルーティング

export class ParentComponent {
  constructor(private router: Router) {}

  goToChild() {
    this.router.navigate(['child', { data: { message: 'Hello

Angular 2 でコンポーネント間でデータを共有するその他の方法

親コンポーネントから子コンポーネントへの参照

ViewChild ディレクティブを使用して、親コンポーネントから子コンポーネントのインスタンスに直接アクセスし、そのプロパティやメソッドを操作することができます。ただし、この方法はコンポーネント間の結合を強くするため、あまり推奨されていません。

イベントバブリングを使用して、子コンポーネントから発生したイベントを親コンポーネントで処理することができます。ただし、この方法はイベントの伝達経路が複雑になる場合があるため、注意が必要です。

グローバル変数

アプリケーション全体で共有する必要がある少量のデータの場合は、グローバル変数を使用することができます。ただし、この方法はコードの可読性と保守性を低下させるため、最後の手段として使用するようにしてください。

• ViewChild: コンポーネント間の結合が強くなり、テストが困難になる可能性があります。
• イベントバブリング: イベントの伝達経路が複雑になり、デバッグが困難になる可能性があります。
• グローバル変数: コードの可読性と保守性が低下する可能性があります。

• ViewChild: 子コンポーネントの DOM 要素に直接アクセスする必要がある場合にのみ使用してください。
• イベントバブリング: 親コンポーネントで子コンポーネントの発生したイベントを処理する必要がある場合にのみ使用してください。
• グローバル変数: アプリケーション全体で共有する必要がある少量のデータの場合にのみ使用してください。