组件间对象的两种方式数据绑定
Two way data binding for object between components
我有输入组件:
<my-input *ngIf='filter.type === checkType.INPUT_TEXT' [filter]='filter'></my-input>
export class MyInputComponent{
@Input() filter: any;
}
MyInputComponent 模板
<input name="name" [(ngModel)]="filter.input">
我想在内部设置过滤器输入并影响外部组件对象。
如何将过滤器对象传递给MyInputComponent
以实现2路数据绑定?
我想实现类似 [(ngModel)]="filter.value" 但在组件之间工作的东西
这里关于 2 向数据绑定的其他帖子没有回答我的问题。
编辑:
在我的 MyInputComponent 中使用 extends DefaultValueAccessor
之后,我的父组件输入消失了,没有任何错误。
import { Component, Input, OnInit, Provider, forwardRef } from '@angular/core';
import { FORM_DIRECTIVES, NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/common';
@Component({
moduleId: module.id,
selector: 'my-input',
directives: [FORM_DIRECTIVES],
host: { '(keyup)': 'doOnChange($event.target)' },
templateUrl: '<input name="name" [(ngModel)]="filter.input">'
})
export class MyInputComponent extends DefaultValueAccessor {
@Input() filter: any;
onChange = (_) => {};
onTouched = () => {};
writeValue(filter:any):void {
if (filter !== null) {
super.writeValue(filter.toString());
}
}
doOnChange(filter) {
this.onChange(filter);
}
}
const MY_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyInputComponent), multi: true});
您需要为此实现自定义值访问器。这是一个示例:
const MY_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyInputComponent), multi: true});
@Component({
(...)
providers: [ MY_VALUE_ACCESSOR ]
})
export class MyInputComponent extends DefaultValueAccessor {
onChange = (_) => {};
onTouched = () => {};
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value.toString());
}
}
// call when your internal input is updated
doOnChange(val) {
this.onChange(val);
}
}
有关详细信息,请参阅本文(第 "NgModel-compatible component" 部分):
另见这个问题:
我有输入组件:
<my-input *ngIf='filter.type === checkType.INPUT_TEXT' [filter]='filter'></my-input>
export class MyInputComponent{
@Input() filter: any;
}
MyInputComponent 模板
<input name="name" [(ngModel)]="filter.input">
我想在内部设置过滤器输入并影响外部组件对象。
如何将过滤器对象传递给MyInputComponent
以实现2路数据绑定?
我想实现类似 [(ngModel)]="filter.value" 但在组件之间工作的东西
这里关于 2 向数据绑定的其他帖子没有回答我的问题。
编辑:
在我的 MyInputComponent 中使用 extends DefaultValueAccessor
之后,我的父组件输入消失了,没有任何错误。
import { Component, Input, OnInit, Provider, forwardRef } from '@angular/core';
import { FORM_DIRECTIVES, NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/common';
@Component({
moduleId: module.id,
selector: 'my-input',
directives: [FORM_DIRECTIVES],
host: { '(keyup)': 'doOnChange($event.target)' },
templateUrl: '<input name="name" [(ngModel)]="filter.input">'
})
export class MyInputComponent extends DefaultValueAccessor {
@Input() filter: any;
onChange = (_) => {};
onTouched = () => {};
writeValue(filter:any):void {
if (filter !== null) {
super.writeValue(filter.toString());
}
}
doOnChange(filter) {
this.onChange(filter);
}
}
const MY_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyInputComponent), multi: true});
您需要为此实现自定义值访问器。这是一个示例:
const MY_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyInputComponent), multi: true});
@Component({
(...)
providers: [ MY_VALUE_ACCESSOR ]
})
export class MyInputComponent extends DefaultValueAccessor {
onChange = (_) => {};
onTouched = () => {};
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value.toString());
}
}
// call when your internal input is updated
doOnChange(val) {
this.onChange(val);
}
}
有关详细信息,请参阅本文(第 "NgModel-compatible component" 部分):
另见这个问题: