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

我需要创建一个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);
    }
}

Answer 2

还有更好的方法，

<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);
       }
    }

将对象引用传递给要在ngModel中使用的Angular2 Component

2 个答案: