javascript - 将对象引用传递给要在 ngModel 中使用的 Angular2 组件

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 不会更改。

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

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