Angular 2
ディレクティブとコンポーネント：@Input @Output

構文

1. 親コンポーネントからネストされたコンポーネントへの一方向バインディング：[propertyName]
2. ネストされたコンポーネントから親コンポーネントへの一方向バインディング：（propertyName）
3. 双方向バインディング（別名バナナボックス記法）：[（propertyName）]

入力例

@inputは、コンポーネント間でデータをバインドするのに便利です。

まず、コンポーネントにインポートします

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

次に、入力をコンポーネントクラスのプロパティとして追加します

@Input() car: any;

コンポーネントのセレクタが 'car-component'であるとします。コンポーネントを呼び出すときに、 'car'という属性を追加すると、

<car-component [car]="car"></car-component>

今あなたの車はあなたのオブジェクト（this.car）の属性としてアクセス可能です

完全な例：

1. car.entity.ts

    export class CarEntity {
       constructor(public brand : string, public color : string) {
       }  
    }

2. car.component.ts

    import { Component, Input } from '@angular/core';
    import {CarEntity} from "./car.entity";
    
    @Component({
        selector: 'car-component',
        template: require('./templates/car.html'),
    })
    
    export class CarComponent {
        @Input() car: CarEntity;
    
        constructor() {
            console.log('gros');
        }
    }

3. garage.component.ts

    import { Component } from '@angular/core';
    import {CarEntity} from "./car.entity";
    import {CarComponent} from "./car.component";
    
    @Component({
        selector: 'garage',
        template: require('./templates/garage.html'),
        directives: [CarComponent]
    })
    
    export class GarageComponent {
        public cars : Array<CarEntity>;
    
        constructor() {
            var carOne : CarEntity = new CarEntity('renault', 'blue');
            var carTwo : CarEntity = new CarEntity('fiat', 'green');
            var carThree : CarEntity = new CarEntity('citroen', 'yellow');
            this.cars = [carOne, carTwo, carThree];
        }
    }

4. garage.html

    <div *ngFor="let car of cars">
    <car-component [car]="car"></car-component>
    </div>

5. car.html

    <div>
        <span>{{ car.brand }}</span> |
        <span>{{ car.color }}</span>
    </div>

Angular2 @Inputおよび@Outputはネストされたコンポーネント内にあります

@Input()を受け取り、ボタンが無効になるまでクリック制限を指定するButtonディレクティブ。親コンポーネントは、 @Outputを介してクリック制限に達すると発生するイベントを聴くことができます：

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

@Component({
    selector: 'limited-button',
    template: `<button (click)="onClick()" 
                       [disabled]="disabled">
                   <ng-content></ng-content>
               </button>`,
    directives: []
})

export class LimitedButton {
    @Input() clickLimit: number;
    @Output() limitReached: EventEmitter<number> = new EventEmitter();

    disabled: boolean = false;

    private clickCount: number = 0;

    onClick() {
        this.clickCount++;
        if (this.clickCount === this.clickLimit) {
            this.disabled = true;
            this.limitReached.emit(this.clickCount);
        }
    }
}

ボタンのディレクティブを使用し、クリック制限に達するとメッセージに警告する親コンポーネント：

import { Component } from '@angular/core';
import { LimitedButton } from './limited-button.component';

@Component({
    selector: 'my-parent-component',
    template: `<limited-button [clickLimit]="2"
                               (limitReached)="onLimitReached($event)">
                   You can only click me twice
               </limited-button>`,
    directives: [LimitedButton]
})

export class MyParentComponent {
    onLimitReached(clickCount: number) {
        alert('Button disabled after ' + clickCount + ' clicks.');
    }
}

Angular2 @非同期データによる入力

場合によっては、子コンポーネントに渡す前にデータを非同期にフェッチする必要があります。子コンポーネントが受け取られる前にデータを使用しようとすると、エラーがスローされます。 ngOnChangesを使用して、コンポーネントの@Inputの変更を検出し、それらが動作する前に定義されるまで待つことができます。

エンドポイントへの非同期呼び出しを伴う親コンポーネント

import { Component, OnChanges, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ChildComponent } from './child.component';

@Component ({
    selector : 'parent-component',
    template : `
        <child-component [data]="asyncData"></child-component>
    `
})
export class ParentComponent {
    
    asyncData : any;

    constructor(
        private _http : Http
    ){}

    ngOnInit () {
        this._http.get('some.url')
            .map(this.extractData)
            .subscribe(this.handleData)
            .catch(this.handleError);
    }

    extractData (res:Response) {
        let body = res.json();
        return body.data || { };
    }

    handleData (data:any) {
        this.asyncData = data;
    }

    handleError (error:any) {
        console.error(error);
    }
}

非同期データを入力として持つ子コンポーネント

この子コンポーネントは、非同期データを入力として受け取ります。したがって、使用する前にデータが存在するのを待たなければなりません。 ngOnChangesを使用して、コンポーネントの入力が変更されるたびに起動し、データが存在するかどうかを確認し、存在する場合は使用します。渡されるデータに依存するプロパティが真でない場合、子のテンプレートは表示されません。

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

@Component ({
    selector : 'child-component',
    template : `
        <p *ngIf="doesDataExist">Hello child</p>
    `
})
export class ChildComponent {
    
    doesDataExist: boolean = false;

    @Input('data') data : any;

    // Runs whenever component @Inputs change
    ngOnChanges () {
        // Check if the data exists before using it
        if (this.data) {
            this.useData(data);
        {
    }

    // contrived example to assign data to reliesOnData    
    useData (data) {
        this.doesDataExist = true; 
    }
}