双向数据绑定原理:Angular中的双向数据绑定

我的问题是指所有 Angular 版本 & gt;=2

那么对于双向数据绑定,Angular 是否支持使用 ngModel 的开箱即用。它只支持表单控件例如输入框?

是开箱即用的支持不可用于自定义组件?例如,我们可以不直接使用 ngModel 如下为自定义组件?还是需要自定义代码?

<custom-counter [(ngModel)]="someValue"></custom-counter>
3

你可以在这里找到演示stackblitz链接

对于任何自定义组件,如果您需要使用 [(ngModel)],那么您需要使用自定义 ControlValueAccessor 基类。

创建一个名为 AbstractValueAccessor 的类...

import { forwardRef } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
const noop = () => {};
export abstract class AbstractValueAccessor implements ControlValueAccessor {
  //The internal data model
  private innerValue: any = "";
  //Placeholders for the callbacks which are later provided
  //by the Control Value Accessor
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;
  //get accessor
  get value(): any {
    return this.innerValue;
  }
  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }
  //Set touched on blur
  onBlur() {
    this.onTouchedCallback();
  }
  //From ControlValueAccessor intece
  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }
  //From ControlValueAccessor intece
  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }
  //From ControlValueAccessor intece
  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}
export function MakeProvider(type: any) {
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => type),
    multi: true,
  };
}

现在,您需要在自定义组件中使用上述类。

自定义组件

import { Component, OnInit } from "@angular/core";
import {
  AbstractValueAccessor,
  MakeProvider,
} from "../app/abstract-value-accessor";
@Component({
  selector: "app-custom-input",
  templateUrl: "./custom-input.component.html",
  styleUrls: ["./custom-input.component.css"],
  providers: [MakeProvider(CustomInputComponent)],
})
export class CustomInputComponent
  extends AbstractValueAccessor
  implements OnInit
{
  ngOnInit() {}
}

上面,providers:[MakeProvider (CustomInputComponent)] 这一行我们为我们的组件提供我们的自定义值访问器。现在,我们准备使用这个组件。

app-component.html

<app-custom-input [(ngModel)]="customValue"></app-custom-input>

app-component.ts

customValue = 'custom-value';
0

Angular 提供ControlValueAccessor来控制自定义组件。

ControlValueAccessor 接口提供了利用 Angular Forms API 并在它和 DOM 元素之间创建连接的能力。

是实现此概念的示例:

https://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(459)
出口退税商品代码是什么:这是什么意思出口(主( ))(exited def)
上一篇
B engi:Pythona b=b a+ b
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(74条)