Angular 中实现自定义组件的双向绑定的两种方法
栏目: JavaScript · 发布时间: 7年前
内容简介：在 Angular 中，对于表单元素，通过如果希望自定义组件能够具有与表单元素相同的对于
在 Angular 中，对于表单元素，通过 [(ngModel)]
即可以简单地实现双向绑定。对于自定义组件而言，希望实现同样的效果可以怎么做呢？
1 实现自定义组件的 ngModel
指令
如果希望自定义组件能够具有与表单元素相同的 ngModel
效果，可以通过在组件内实现 ControlValueAccessor
接口达到目的。
对于 [(ngModel)]
，需要至少实现该接口的如下方法：
interface ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
}
最简单的核心实现示例参考如下。
import { ControlValueAccessor } from '@angular/forms/src/directives';
import { Component, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'custom-input',
template: `<input [(ngModel)]="value"/>`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => UnionInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
constructor() { }
private innerValue: any = '';
private onTouchedCallback: () => void = function () { };
private onChangeCallback: (_: any) => void = function () { };
get value(): any {
return this.innerValue;
}
set value(v: any) {
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
}
}
/**
* model view -> view value
*/
writeValue(value: any) {
if (value !== this.innerValue) {
this.innerValue = value;
}
}
/**
* view value ->model value
*/
registerOnChange(fn: any) {
this.onChangeCallback = fn;
}
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
}
2 使用 get/set 关键字实现父子组件的双向绑定
其实实现双向绑定内部的本质原理就是父子组件的事件绑定机制。简单举例如下。
2.1 自定义子组件定义
import { Input, Output, Component, EventEmitter } from '@angular/core';
@Component({
selector: 'custom-input',
template: `<input [(ngModel)]="innerValue"/>`,
})
export class CustomInputComponent {
innerValue;
@Input()
get twoWayModel() {
return this.innerValue;
}
set twoWayModel(val) {
this.innerValue = val;
this.twoWayModelChange.emit(this.innerValue);
}
@Output() twoWayModelChange: EventEmitter<string> = new EventEmitter</string><string>();
}
2.2 使用自定义组件
在需要使用组件的地方，通过 [(twoWayModel)]
即可实现双向绑定的效果。
import { Input, Output } from '@angular/core';
import { Component, forwardRef, Input } from '@angular/core';
@Component({
selector: 'custom-input',
template: `<custom -input [(twoWayModel)]="inputValue" (twoWayModelChange)="onInputValueChange($event)"></custom>`
})
export class abcComponent {
inputValue;
onInputValueChange(val) {
console.log(val);
console.log(val === this.inputValue); // true
}
}
更多参考
以上所述就是小编给大家介绍的《Angular 中实现自定义组件的双向绑定的两种方法》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Unity游戏设计与实现
[日]加藤政树 / 罗水东 / 人民邮电出版社 / 2015-2 / 79.00元
本书出自日本知名游戏公司万代南梦宫的资深开发人员之手，面向初级游戏开发人员，通过10个不同类型的游戏实例，展示了真正的游戏设计和实现过程。本书的重点并不在于讲解Unity的各种功能细节，而在于核心玩法的设计和实现思路。每个实例都从一个idea 开始，不断丰富，自然而然地推出各种概念，引导读者思考必要的数据结构和编程方法。掌握了这些思路，即便换成另外一种引擎，也可以轻松地开发出同类型的游戏。 ......一起来看看 《Unity游戏设计与实现》 这本书的介绍吧!
