时间戳

首页 > 解决方案 > 在事件绑定中使用函数作为变量的概念是什么？

angular - 在事件绑定中使用函数作为变量的概念是什么？

问题描述

我正在尝试调查ControlValueAccessor，我注意到一些函数_onChange作为变量，绑定到input事件。请让我知道为什么_onChange没有在事件上调用函数input，这种事件绑定的意义是什么。

模板：

  <input #passwordInput
         type="password"
         [id]="id"
         class="form-control"
         [disabled]="disabled"
         (input)="_onChange($event.target.value)" 
         (blur)="_onTouched()"
  >

零件：

 _onChange = (value: any) => {
    console.log(`At _onChange`);  

  };

标签： angularevent-binding

解决方案

Sql_dummy，函数 _OnChange 是您在 registerOnChange 中分配的变量

registerOnChange(fn: any): void {
    this._onChange = fn;
}

因此，每次调用此函数时，Angutar 都会通知应用程序控件已更改。您不能“覆盖”此功能。如果当您更改输入时想要做“更多”您使用的事情，例如

<input #passwordInput  (input)="OnInput($event.target.value)" ..>

//and
OnInput(value:any)
{
   //..make something more...
   console.log(value)
   //finally you call to the function
   this._onChange(value)
}

更新简要说明

假设您有一个 customForm 组件<myComponent [formControl]="control">或<myComponent [(ngModel)]="variable">. Angular 如何知道会改变 formControl 或变量的值？：当您在自定义组件中调用函数 _onChange 时。

你可以例如写一些喜欢

  <input #passwordInput
         type="password"
         [id]="id"
         class="form-control"
         [disabled]="disabled"
         (blur)="_onChange($event.target.value);_onTouched()"
  >

在您的应用程序中，您会看到只有在“模糊”输入时才更改 formControl 或变量的值。这就是如果我们有一个输入，我们通常使用事件的原因(input)——最好使用事件（keyup）。我们对 Angular 说，输入中的每次更改都会将值发送到应用程序。

另一个例子，假设你的自定义组件挡道了

<button>option 1</button>
<button>option 2</button>
<button>option 3</button>

是的，我知道这三个按钮是一个非常愚蠢的自定义组件，它只是一个例如

我们可以在每个按钮的（点击）中调用函数_onChange，并使用不同的值

<button (click)="_onChange(1)">option 1</button>
<button (click)="_onChange(2)">option 2</button>
<button (click)="_onChange(3)">option 3</button>

推荐阅读