NG_VALUE_ACCESSOR

用于为表单控件提供 ControlValueAccessor

interface ControlValueAccessor {writeValue(obj: any): voidregisterOnChange(fn: any): voidregisterOnTouched(fn: any): voidsetDisabledState(isDisabled: boolean)?: void
}

双向绑定示例组件：

import {ChangeDetectionStrategy,ChangeDetectorRef,Component,forwardRef,
} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';@Component({selector: 'my-input',styleUrls: ['./my.input.component.scss'],changeDetection: ChangeDetectionStrategy.OnPush,providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => MyInputComponent),multi: true,},],template: `<input type="text" #inputElement [(ngModel)]="value"  (ngModelChange)="modelChange($event)"/><button (click)="clickMe()">change</button>`
})
export class MyInputComponent implements ControlValueAccessor {private onTouch = () => {};private onChange = (newValue: any) => {};value = '';index = 0; // for test manual change valueconstructor(private cdr: ChangeDetectorRef) { }clickMe() {const v = 'index : ' + (++this.index);this.value = v;this.onChange(v);}modelChange(newValue: string) {this.onChange(newValue);}// ControlValueAccessor - // 至少需要实现 writeValue, registerOnChange,registerOnTouchedwriteValue(v: any) {if (v !== this.value) {this.value = v;}// on pushthis.cdr.markForCheck();}registerOnChange(fn: any) {this.onChange = fn;}registerOnTouched(fn: any) {this.onTouch = fn;}
}

registerOnTouched 的参数 fn：

registerOnChange 的参数 fn ：

angular : 自定义组件双向绑定 [(ngModel)]相关推荐

vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
【angular学习】自定义实现双向绑定
实现username属性的双向绑定根据慕课网教程代码 horizontal-grid.component.html  ...
Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）
Vue父组件访问子组件属性和方法.父子组件双向绑定(两种方法) 1. 使用vue-cli创建项目目录结构如下图: 2. 编写代码 src/components/HelloWorld.vue < ...
angular的数据双向绑定
以前我们通过jquery操作DOM可以实现数据绑定,但这样会使操作量加大,而在angular中可以轻松的实现数据双向绑定.数据双向绑定指的是数据改变,相应的视图发生改变,而用户操作视图,底层数据会发生 ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
angular 自定义组件_如何创建Angular 6自定义元素和Web组件
angular 自定义组件 by Prateek Mishra 通过Prateek Mishra 如何创建Angular 6自定义元素和Web组件 (How to create Angular 6 C ...
Angular自定义组件实现ngModel双向绑定
1.自定义组件ts @Component({selector: 'app-custom-tree',templateUrl: './custom-tree.component.html',styles ...
【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
app.component.html <app-sizer [(ngModel)]="fontSizePx"></app-sizer> <p [sty ...
angular 自定义组件的双向数据绑定
组件 import { Component, EventEmitter, Input, Output } from '@angular/core';@Component({selector: 'app ...

angular : 自定义组件双向绑定 [(ngModel)]

NG_VALUE_ACCESSOR

angular : 自定义组件双向绑定 [(ngModel)]相关推荐

最新文章

热门文章