javascript - 将 `ngModel` 从子组件管道传输到父组件

Question

我正在尝试使 [(ngModel)] 在子组件内部工作。我最终想要的是将复杂的大表格拆分为可读的小表格。我希望这将使我的代码更容易理解。

这是我不起作用的代码:https://plnkr.co/edit/UrTopLJ8RsZovltDkPiR?p=preview

我从这篇非常有用的文章中 fork 了我的代码:https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html#creating-custom-two-way-data-bindings

我希望有一种方法可以在 Angular 4 中很好地分割大表单。

Answer 1

您缺少的是 getter 和 setter。使用它们或然后使用 ngModelChange 来发出修改后的值:

@Input() counter;
@Output() counterChange = new EventEmitter();

然后在模板中:

(ngModelChange)="counterChange.emit(counter)"

<强> PLUNKER

正如您所提到的，您可以将其与表单一起使用。我建议您使用模型驱动的表单，因为那样您就不需要它了。您可以在父级中构建表单，并将嵌套表单组传递给子级。父级将知道您对子级所做的更改，而无需使用 @Output()

这是一个很好的构建 Nested model driven forms 的例子以将嵌套组传递给子组件的示例。