2017年1月26日木曜日

【Angular2】カスタムディレクティブでの双方向データバインド

結論:できません



でも、イベントを使えばそれっぽいことができます。

■ディレクティブ
import {Component, EventEmitter} from '@angular/core';

@Component({
    selector: 'input-directive',
    inputs: ['inputValue'],
    outputs: ['inputEvent'],
    template: `<input [(ngModel)]="year" (change)="onYearChange($event) />`

export class YearListComponent {
    inputValue: string;
    inputEvent: EventEmitter = new EventEmitter();

    constructor(public manager: ServiceManager) {
    }

    //変更イベント
    public onChange(event) {
        this.inputEvent.emit(event);
    }
}
})


■ディレクティブを呼び出すHTML
<input-directive [inputValue]="data" (inputevent)="data=$event.target.value">
</input-directive>


0 件のコメント:

コメントを投稿