主页 / coding / 问题 / 78798296
Accepted
Green Grasso Holm
Asked: 2024-07-26 21:22:32 +0800 CST

当未指定 ngModelChange 时，Angular 隐式 ngModel 更改处理程序？

  • 772

[(ngModel)]我有在组件模板中使用实现组件字段和表单控件之间的双向值绑定的经验，以及(ngModelChange)在值发生变化时使用执行额外工作的经验。

// code
foo: number;
onFooUpdate($event) { /* work */ }
// template
<input [(ngModel)]="foo" (ngModelChange)="onFooUpdate($event)" />

我敢发誓，我曾经读到过，有一个名称可以根据字段名称用于处理程序，如果ngModelChanged没有明确指定，当值发生变化时，应用程序将按照惯例调用该名称。例如：

// code
foo: number;
fooChange($event) { /* work */ }
// template
<input [(ngModel)]="foo" />

当 的值foo发生变化时，应用程序将查找被调用的方法fooChange，如果存在，则调用该方法。我现在正在尝试这样做，交替使用fooChange和fooChanged，但它们没有被调用，现在我找不到任何信息来支持这一点。我错了吗？

angular

2 个回答

  1. Best Answer

    假设您创建一个具有双向数据绑定的属性。

    <app-child [(test)]="qwerty"/>

    然后为了使其工作，子项上必须同时存在 @Input 和 @Output，其标准是它应该有名称testChange，通过在子项上提供此名称，您可以实现双向数据绑定。

    @Input() test: string;
@Output() testChange: EventEmitter<string> = new EventEmitter<string>();

    我认为您误解了这一点，认为 ngModel 会自动创建一个输出发射器<<prop name>>Change，这是错误的。

    如果你看一下源代码，我们只有@Output() ngModelChange，它在值改变时被调用。

    因此您必须手动指定要调用它ngModelChange。

    • 1

  2. 您指的是双向绑定语法。它仅适用于提供双向绑定的组件的输入和输出。假设您有一个具有双向绑定的组件，其属性名为value，则输入和输出将如下所示：

    @Component({ selector: 'my-component' })
export class MyComponent {
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
}

    这里重要的是输出的名称与输入的名称相匹配，后缀为Change。然后，您可以使用双向绑定，如下所示：

    <my-component [(value)]="someVar" />

    但是，这仅适用于输入和输出。它不适用于您的场景。您需要使用上述更详细的代码。

    • 0

相关问题