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 中实现自定义组件的双向绑定的两种方法》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
神一样的产品经理
闫荣 / 电子工业出版社 / 2012-6-1 / 79.00元
这是一本系统阐述移动与互联网产品从无到有、从有到优的产品经理实践案例著作。《神一样的产品经理：基于移动与互联网产品实践》贯穿着“人如产品，产品如人”、“产品的根基和源泉来自现实生活”的写作理念，表达了产品的成功需要神一样的产品经理管理的观点。 《神一样的产品经理：基于移动与互联网产品实践》由浅入深、循序渐进地阐述了产品经理、产品需求、用户体验、项目管理、产品运营和产品团队管理的内容，理论与实......一起来看看 《神一样的产品经理》 这本书的介绍吧!
