【Angular】サービスクラスを利用してコンポーネント間で値の共有をする

1月 1, 2023

今回はAngularのコンポーネント間での値共有方法の１つであるサービスクラス作って実際に値共有をしていきます。

動きとしては親、子のコンポーネントを用意し、親⇒子、子⇒親への双方向での画面入力値を共有をしたいと思います。

1. サービスクラスを利用してコンポーネント間で値の共有をする

サービスクラスを利用してコンポーネント間で値の共有をする

今回使用した環境

インターネット接続可能のオンラインの環境

64 ビットオペレーティングシステム

Windows 10 22H2

Angular CLI: 13.3.10

Node: 16.15.0

ソース

まずはサービスクラス「ParentChildSharedService」です。コンポーネント間で値共有しようとしている変数が「parentValue」、「childValue」となります。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ParentChildSharedService {

  parentValue: string = "";
  childValue: string = "";

  constructor() { }
}

続いて親コンポーネントのHTML、クラスです。ngDoCheckのイベントの中で親⇔子の入力値を共有しています。

<p>parent works!</p>
parentコンポーネントからchildコンポーネントに渡す値：
<input type="text" [(ngModel)]="parentValue">
<br />
childコンポーネントからparentコンポーネントに渡された値：
{{childValue}}
<app-child></app-child>

import { Component, OnInit } from '@angular/core';
import { ParentChildSharedService } from '../parent-child-shared.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  parentValue: string = "";
  childValue: string = "";

  constructor(
    private parentChildSharedService: ParentChildSharedService
  ) { }

  ngOnInit(): void {
  }

  ngDoCheck(): void {
    this.parentChildSharedService.parentValue = this.parentValue;
    this.childValue = this.parentChildSharedService.childValue;
  }
}

以下が子コンポーネントのHTML、クラスです。

<p>child works!</p>
childコンポーネントからparentコンポーネントに渡す値：
<input type="text" [(ngModel)]="childValue">
<br />
parentコンポーネントからchildコンポーネントに渡された値：
{{parentValue}}

import { Component, OnInit } from '@angular/core';
import { ParentChildSharedService } from '../parent-child-shared.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  parentValue: string = "";
  childValue: string = "";

  constructor(
    private parentChildSharedService: ParentChildSharedService
  ) { }

  ngOnInit(): void {
  }

  ngDoCheck(): void {
    this.parentValue = this.parentChildSharedService.parentValue;
    this.parentChildSharedService.childValue = this.childValue;
  }
}