4

我有输入组件：

<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">

我想在内部设置过滤器输入并对外部 Component 对象产生影响。

如何将过滤器对象传入MyInputComponent以实现2路数据绑定？

我想实现类似 [(ngModel)]="filter.value" 但在组件之间工作

这里关于 2-way 数据绑定的其他帖子没有回答我的问题。

编辑：

extends DefaultValueAccessor在我的 MyInputComponent 中使用后，我的父组件输入消失，没有任何错误。

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});
4

1 回答 1

2

您需要为此实现自定义值访问器。这是一个示例：

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兼容组件”一节）：

另请参阅此问题：

于 2016-06-30T13:18:39.853 回答