Angular 2
지시문 및 구성 요소 : @Input @Output

통사론

1. 부모 구성 요소에서 중첩 구성 요소로 바인딩하는 한 가지 방법 : [propertyName]
2. 중첩 된 구성 요소에서 상위 구성 요소로 바인딩하는 한 가지 방법 : (propertyName)
3. 양방향 바인딩 (일명 바나나 박스 표기) : [(propertyName)]

입력 예제

@input은 구성 요소간에 데이터를 바인딩하는 데 유용합니다.

먼저 구성 요소에서 가져 오기

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

그런 다음 입력을 구성 요소 클래스의 속성으로 추가합니다.

@Input() car: any;

구성 요소의 선택기가 '자동차 구성 요소'이고, 구성 요소를 호출 할 때 '자동차'속성을 추가한다고 가정 해 보겠습니다.

<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를 사용합니다. 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; 
    }
}