Angular コンポーネント間の連携手法まとめ(Service/@ViewChildで親から子のメソッドを呼出し)

初級者向けに説明した際の備忘録です。

Component_Cooperation_image

概要

  • AngularにおけるComponent間連携

    • 別々のComponent間ではそのままデータを受け渡したり、メソッドを呼び出すことができません
    • Material等を用いた画面の作り方を覚えて、機能開発を始めたレベルの初級者が最初にハマるポイントだと思います
  • 連携手法

    1. Serviceとして機能を外に取り出し、複数のComponent側から参照
      • 基本的にこちらが推奨
    2. 親子構造のコンポーネント間で直接参照する
      • @ViewChildデコレータというものを使えば手軽にできます

上記の連携手法x2について解説します。

① Serviceを活用する場合の手順

  • Serviceに機能を取り出して参照する場合の手順を以下に示します
    • 親子間で連携させたい場合は飛ばしてください

Serviceを作成して機能を取り出す

  • 作成
    1
    ng g service 'service-name'
  • service-name.service.tsを編集
    • 共有したい機能は基本的にここに書く
    • Component側に書くのはUI関係に絞る

Serviceをimport

  • 以降はServiceを取り込むComponentのtsファイルを編集します
    1
    import { ServiceNameService } from '../service-name.service';

    Serviceを注入

  • constructorにserviceを注入することで、Service内のメソッドを参照可能になります
    • private “このComponent内でServiceを扱う名称”: “Serviceのクラス名”
      1
      2
      3
      4
      5
      6
      export class TestComponent implements OnInit {

      // Serviceを注入インスタンス化
      constructor(private TestService: ServiceNameService) {
      console.log('サービスを注入');
      }

Serviceのメソッドを実行

  • 上記で定めたTestService.”メソッド名” で実行できます
    1
    this.TestService.functionA();

② @ViewChildを活用する場合の手順

  • 親子間でメソッドを呼ぶ際の手順を示します

@ViewChildと対象の子Componentをimport

  • ※対象が複数の場合はViewChildrenを用いる
    1
    2
    3
    4
    // 親子間の連携にはViewChildが必要
    import { Component, ViewChild } from '@angular/core';
    // 子のComponentをimport
    import { ChildComponent } from '../child/child.component';

@ViewChildデコレータを設定

  • ※Angular8以上は@ViewChildの引数が二つ
  • {static: false}を第二引数に指定すればOK
    1
    2
    3
    4
    export class ParentComponent {
    // 子コンポーネントをプロパティ:childとして設定
    @ViewChild( ChildComponent, {static: false} )
    private child: ChildComponent;

子のメソッドを実行

1
child.functionA();
  • 今回の解説は以上です
    • Angularを扱う際は、なるべく細かいComponentに分けて疎結合な設計にしましょう
@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×