将对象引用传递给 Angular2 组件以在 ngModel 中使用

Question

我有一个内部包含此代码的组件：

<div class="form-group">
    <label for="title">Title</label>
    <input type="text" [(ngModel)]="model.title" name="title" required/>
</div>

我正在尝试将整个东西迁移到另一个组件中，input-component：

@Component({
    selector: 'input-component',
    template: `
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" [(ngModel)]="value" name="title" required/>
        </div>
    `
})
export class InputComponent {
    @Input() value: string;
}

所以第一个示例代码将替换为：

<input-component [value]="model.title"></input-component>

当model.title改变时，HTML元素内部的值改变了，但是当我改变元素的内容时，model.title没有改变。

如何使用此设置实现双向数据绑定？

Answer 1

更好的方法是，

<input-component [(value)]="model.title"></input-component>

---

    <input type="text" [(ngModel)]="value" name="title" 
                       (keyup)="update(value)" required/>      ///<<<### keyup


    export class InputComponent {
        @Input() value: string;
        @Output  valueChange:EventEmitter=new EventEmitter();  ///<<<### added

       update(value){
           this.valueChange.emit(value);
       }
    }

Answer 2

我需要创建一个EventEmitter 来执行此操作：

@Component({
    selector: 'input-component',
    template: `
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" [ngModel]="value" (ngModelChange)="onInput($event)" name="title" required/>
        </div>
    `
})
export class InputComponent {
    @Input() value: string;
    @Output() valueChange = new EventEmitter();

    public onInput(event: string) {
        this.value = event;
        this.valueChange.emit(event);
    }
}