Angular 復習(Angular4～)

@Input、@Output

1. @Input

@Inputは、親コンポーネントが、子コンポーネントにデータを渡すための
デコレータである。

子コンポーネントのクラスに@Inputデコレータを付けた変数を用意し、親コンポーネントHTMLの子コンポーネントセレクタの[変数名]に値を代入する。
これにより、item変数に値が入り、子コンポーネントの画面に反映することができる。

子コンポーネントクラス

@Component(
    selector: 'stock-order',
    templete: `<ul><li>{{item.price}}</li><li>{{item.qty}}</li></ul>`,
)
export class ItemComponent{
    @Input item: Order;
}

親コンポーネントhtml

<stock-order [item]="selected"></stock-order>

@Outputは、@Inputとは逆に子コンポーネントから親コンポーネントにデータを渡すためのデコレータである。
子コンポーネントに、EventEmiter<?>オブジェクトを生成し、emit()メソッドをコールすることで、親コンポーネントに通知する。
親コンポーネントでは、子コンポーネントセレクタでイベントバインディング構文を(定義した子コンポーネント@Output変数)="親コンポーネントfunc($event)"という形で追加、親コンポーネントfunc($event)内で親コンポーネントの画面に反映をする。つまり、親コンポーネントにイベントとして通知される。

子コンポーネント

@Component(
    selector: 'stock-order',
    templete: `<ul><li>{{item.price}}</li><li>{{item.qty}}</li></ul>`,
)
export class ItemComponent{
    @Input  item : Order;
    @Output editedItem: EventEmiter<Order>;

    submit(){
        this.editedItem.emit(this.item);
    }
}

親コンポーネント

@Component(
    selector: 'order',
    templete: `<h1>{{price}}</h1><stock-order ></stock-order>`,
)
export class OrderComponent{
    price: int;
    onEdited(item: Order){
        price = item.price;
    }
}

Angular tips(4)

Angular 復習(Angular4～)

@Input、@Output

1. @Input

2. @Output