不确定如何在 Angular 上为自定义组件应用双向绑定

Question

我有一个视图组件，它从服务中获取数据模型并将其设置为自身的属性。然后，一组自定义组件接收属性的字段作为输入以在其中显示。这按预期工作。

<app-textbox [caption]="'First name'"
             [value]="data.name.first"></app-textbox>

ngOnInit() {
  this.service.getData()
    .subscribe(res => this.data = res);
}

编辑自定义组件的内容时，我注意到原始模型没有更新。经过一些谷歌搜索后，我发现我需要双向绑定它并尝试了以下方法（显然是香蕉盒表示法）。遗憾的是，似乎没有任何效果，并且新条目没有改变原始模型。

<app-textbox [caption]="'First name'"
             [(value)]="data.name.first"></app-textbox>

我还尝试应用 ngModel，如下所示，但这导致出现错误消息，指出 No value accessor for form control with unspecified name attribute.检查 docs 让我知道它应该工作但没有我需要的那么详细。

<app-textbox [caption]="'First name'"
             [(ngModel)]="data.name.first"></app-textbox>

我需要一个指向我哪里出错的指针。我需要在自定义组件中的某处发出值吗？我必须使用表格吗？我现在解决它的唯一想法是标记所有控件并手动收集值。这显然是一种不好的做法。

Answer 1

您的组件必须是表单控件并实现 ControlValueAccessor。例如，您可以在此处 https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html 阅读更多相关信息。如果您的组件执行一些 "input-ish" 操作（键入和显示文本），就是这种情况。

或者你应该在你的组件中添加一个 @Input() 和一个 @Output() 并按照你需要的方式处理它。在这种情况下，您的绑定将被拆分并且模板看起来像这样 <app-textbox [caption]="'First name'" (change)="handleChange($event)"></app-textbox>。在此示例中，@Input() 是 caption，@Output() 是 change。

Answer 2

是的，你是对的，你需要从子组件发出事件，你需要在你的事件名称中添加后缀 "Change"。在你的情况下应该是

@Output() valueChange = new EventEmitter<string>();

只有 angular 才能识别 [()] 语法。

不确定如何在 Angular 上为自定义组件应用双向绑定

Unsure how to apply two-way binding on Angular for a custom component

typescript

angular-ngmodel

angular

two-way-binding