Angular 2 の @Input と @Output を使ってコンポーネント間でデータをやり取りする方法
2024-06-21
Angular 2 でコンポーネント間でオブジェクトを渡す方法
@Inputを使って親コンポーネントから子コンポーネントへデータを渡す
@Input ディレクティブは、親コンポーネントから子コンポーネントへデータを渡すために使用されます。
例:
親コンポーネント (parent.component.ts):
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
hero = {
id: 1,
name: 'Superman',
powers: ['Flight', 'Super Strength', 'Laser Vision']
};
constructor() { }
ngOnInit() { }
}
<app-child [hero]="hero"></app-child>
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
@Input() hero: any;
constructor() { }
ngOnInit() { }
}
<h2>{{hero.name}}</h2>
<ul>
<li *ngFor="let power of hero.powers">{{power}}</li>
</ul>
上記コードの説明:
- 親コンポーネント (
parent.component.ts) で、heroというオブジェクト変数を定義します。 - 親コンポーネントのテンプレート (
parent.component.html) で、app-childコンポーネントタグに[hero]="hero"というバインディングを使用し、heroオブジェクトを子コンポーネントに渡します。 - 子コンポーネント (
child.component.ts) で、@Inputディレクティブを使用してheroプロパティを定義し、親コンポーネントから渡されたオブジェクトを受け取ります。 - 子コンポーネントのテンプレート (
child.component.html) で、heroオブジェクトのプロパティ (nameとpowers) を表示します。
@Outputを使って子コンポーネントから親コンポーネントへイベントを発行し、データを渡す
@Output ディレクティブと EventEmitter クラスは、子コンポーネントから親コンポーネントへイベントを発行し、イベントと共にデータを渡すために使用されます。
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
@Input() hero: any;
@Output() onHeroClicked = new EventEmitter<any>();
constructor() { }
ngOnInit() { }
onClick() {
this.onHeroClicked.emit(this.hero);
}
}
<h2>{{hero.name}}</h2>
<button (click)="onClick()">Click Me</button>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
hero = {
id: 1,
name: 'Superman',
powers: ['Flight', 'Super Strength', 'Laser Vision']
};
constructor() { }
ngOnInit() { }
onHeroClicked(hero) {
console.log('Hero clicked:', hero);
}
}
<app-child [hero]="hero" (onHero
Angular 2 でコンポーネント間でオブジェクトを渡すサンプルコード
親コンポーネントから子コンポーネントへデータを渡す
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
hero = {
id: 1,
name: 'Superman',
powers: ['Flight', 'Super Strength', 'Laser Vision']
};
constructor() { }
ngOnInit() { }
}
<app-child [hero]="hero"></app-child>
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
@Input() hero: any;
constructor() { }
ngOnInit() { }
}
<h2>{{hero.name}}</h2>
<ul>
<li *ngFor="let power of hero.powers">{{power}}</li>
</ul>
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
@Input() hero: any;
@Output() onHeroClicked = new EventEmitter<any>();
constructor() { }
ngOnInit() { }
onClick() {
this.onHeroClicked.emit(this.hero);
}
}
<h2>{{hero.name}}</h2>
<button (click)="onClick()">Click Me</button>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
hero = {
id: 1,
name: 'Superman',
powers: ['Flight', 'Super Strength', 'Laser Vision']
};
constructor() { }
ngOnInit() { }
onHeroClicked(hero) {
console.log('Hero clicked:', hero);
}
}
<app-child [hero]="hero" (onHeroClicked)="onHeroClicked($event)"></app-child>
- 子コンポーネント (
child.component.ts) で、@OutputディレクティブとEventEmitterクラスを使用してonHeroClickedというイベント
Angular 2 でコンポーネント間でオブジェクトを渡すその他の方法
サービスを使う
サービスは、コンポーネント間で共有できるデータとロジックを格納するための良い方法です。コンポーネント間でオブジェクトを渡すために、サービスを使用してオブジェクトを格納し、他のコンポーネントからそのオブジェクトにアクセスできるようにすることができます。
hero.service.ts:
import { Injectable } from '@angular/core';
@Injectable()
export class HeroService {
private hero: any = {
id: 1,
name: 'Superman',
powers: ['Flight', 'Super Strength', 'Laser Vision']
};
constructor() { }
getHero() {
return this.hero;
}
setHero(hero) {
this.hero = hero;
}
}
import { Component, OnInit } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
constructor(private heroService: HeroService) { }
ngOnInit() { }
getHero() {
console.log(this.heroService.getHero());
}
setHero(hero) {
this.heroService.setHero(hero);
}
}
import { Component, Input, OnInit } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
constructor(private heroService: HeroService) { }
ngOnInit() { }
getHero() {
console.log(this.heroService.getHero());
}
setHero(hero) {
this.heroService.setHero(hero);
}
}
この例では:
HeroServiceというサービスを作成します。- このサービスには、
getHero()とsetHero()という 2 つのメソッドがあります。 getHero()メソッドは、サービスに格納されているヒーローオブジェクトを返します。- 親コンポーネント (
parent.component.ts) は、HeroServiceを注入し、getHero()とsetHero()メソッドを使用してヒーローオブジェクトを取得および設定します。
RxJS は、Reactive Programming を JavaScript で実装するためのライブラリです。RxJS を使用して、コンポーネント間でオブジェクトを Observable として発行し、購読することができます。
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Observable, of } from 'rxjs';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
@Output() heroClicked = new EventEmitter<any>();
constructor() { }
ngOnInit() { }
onClick() {
const hero = {
id: 1,
name: 'Superman',
powers: ['Flight', 'Super Strength', 'Laser Vision']
};
const heroObservable = of(hero);
this.heroClicked.emit(heroObservable);
}
}
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
@Input() heroObservable: Observable<any>;
constructor() { }
ngOnInit() {
this.heroObservable.subscribe(hero => console.log('Hero clicked:', hero));
}
}
angular angular2-directives
