【Angular】苦手な@Input、@Outputを克服しよう

2022年7月16日2023年10月15日

@Inputと@Outputがいまいちわかんねぇ！！
教えてくれ！！

はい、教えます。

この記事で解説すること

@Inputと@Outputについて

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラ類似のおすすめサイトを徹底比較|実際に使ってみた経験談ありこの記事ではココナラに類似しているおすすめサイトを紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。ココナラに登…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

@Inputってなに？

@Inputは、親のコンポーネントから子のコンポーネントに値を渡せます。

@Inputを使う場合は、

親のコンポーネントのHTMLで、[company]=”companyDate”とし、

子のコンポーネントのcomponent.tsで、@Input() companyDataとすることで、親のコンポーネントのcompanyDataを子のコンポーネントに渡せます。

それにより、子のコンポーネントでもcompanyDataを使うことができます。

そもそもどうやって、親コンポーネントと子コンポーネントの関係にするのか？

親⇆子コンポーネントに値を渡すとき、そもそもコンポーネント同士が親と子になっていないとダメです。

親と子のコンポーネントの関係にさせるには、以下のようにできます。

結論、親コンポーネントのHTML(ここではcompany.component.html)で、子のコンポーネント(store.component.html)を以下のように書けば良いです。

<p>親コンポーネント</p>

<app-store></app-store>

で、このapp-storeっているいうのはどこから出てきたかというと、ng generate componentコマンドでstore.component.html、ts、cssファイルを作成したときに、tsファイルに以下のように書かれているかと思います。

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
  }

}

この@Componentの中のselectoreに注目してください。selector: ‘app-store’,となっていますよね。これです。

@Inputを実際にコードを書いて解説

結論、@Inputで親から子のコンポーネントに値を渡すには以下のように書きます。

子のコンポーネントに企業名を渡したいと思います。

親コンポーネント(company)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-company',
  templateUrl: './company.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyComponent implements OnInit {
  public companyName: string;

  constructor() { }

  ngOnInit(): void {
    this.companyName = 'テスト企業1';
  }
}

<p>親コンポーネント</p>

<app-store [companyName]="companyName"></app-store>

※たまたま[companyName]=”companyName”となっていますが、同じ名前でなくて良いです。[]には、実際に子のコンポーネントで使用する変数名にします。

子のコンポーネント(store)

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {
  @Input() companyName: string;

  constructor() { }

  ngOnInit(): void {
  }

}

@Input() 変数名としますが、この変数名は、先ほど[]の中に書いた変数名と同じになるようにしてください。

<div>{{ companyName }}</div>

これで、親から子に値を渡せているので、テスト企業1が確認できるでしょう。

え？確認できない？そんな時は以下を確認しましょう。

app.module.tsにcompanyとstoreのコンポーネントは読み込んでいるか？

...
import { CompanyComponent } from 'src/app/company/company.component';
import { StoreComponent } from 'src/app/store/store.component';
....

...
@NgModule({
  declarations: [
    AppComponent,
    CompanyComponent,
    StoreComponent,
...

子のコンポート名がselectorと一致していない

@Component({
selector: ‘app-store’,

だから、<app-store></app-store>とするべきなのに、<store></store>とかにしていない？

@Inputを使うのに、Inputはimportしてる？

import { Input } from '@angular/core';←import忘れてない？？

@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {
  @Input() companyName: string;

親から子へ渡す変数名は一致しているか？

<app-store [companyName]="companyName"></app-store>

[]の中の変数名と

@Input() companyName: string;

@Input()変数名は一致しているか？

@Outputってなに？

@Outputは、子のコンポーネントから親のコンポーネントに値を渡せます。

@Outputは、@Inputよりも少し難しいです。

EventEmitterを使います。

@Outputを実際にコードを書いて解説

結論、以下のように書けばいいです。

子のコンポーネント(store)

@OutputとEventEmitterを使って、親のコンポーネントに通知を行います。

※Output, EventEmitterをimportしてください。

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {
  @Input() companyName: string;
  @Output() storeName = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  public postStoreName() {
    this.storeName.emit('テスト店舗1');
  }

}

store.component.tsで定義したpostStoreNameは、以下のようにHTMLで定義しました。

<div>{{ companyName }}</div>

<button mat-raised-button color="primary" (click)="postStoreName()">企業に店舗名を送信</button>

子のコンポーネントで@Output() storeNameとしているので、親のコンポーネントのHTMLで(storeName)=”親コンポーネントの関数名”とします。

親コンポーネント(company.component.html)

<p>親コンポーネント</p>

<app-store [companyName]="companyName" (storeName)="getStoreName($event)"></app-store>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-company',
  templateUrl: './company.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyComponent implements OnInit {
  public companyName: string;

  constructor() { }

  ngOnInit(): void {
    this.companyName = 'テスト企業1';
  }

  public getStoreName(storeName: string) {
    console.log(storeName);
  }
}

図にするとこんな感じです。