angular - コンポーネント間のオブジェクトの双方向データバインディング

Question

入力付きのコンポーネントがあります：

<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双方向のデータバインディングを実現するためにフィルターオブジェクトを渡す方法は?

[(ngModel)]="filter.value" のようなものを達成したいのですが、コンポーネント間で作業しています

双方向データバインディングに関する他の投稿は、私の質問には答えません。

編集：

extends DefaultValueAccessorMyInputComponent で使用した後、親コンポーネントの入力がエラーなしで消えます。

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