web-dev-qa-db-ja.com

angular 2-4のコンポーネント間の双方向バインディング

子コンポーネントの値を親コンポーネントにバインドしたいのですが。 @Input()と[(ngModel)]では不十分な場合にこれを行うにはどうすればよいですか？

ここにプランカーがあります

angulartwo-way-binding
7
Bellash

ここでも@Outputを設定し、コンポーネントを次のように変更する必要があります

export class CounterComponent {

  @Output('initoChange') emitter: EventEmitter<string> = new EventEmitter<string>();
  @Input('inito') set setInitoValue(value) {
      this.count = value;
  }
  count: number = 0;

  increment() {
    this.count++;
    this.emitter.emit(this.count);
  }

  decrement() {
    this.count--;
    this.emitter.emit(this.count);
  }

}

plunker へのリンクはこちらです。

8
Vivek Doshi

次のような双方向のデータバインディングを作成できます。

_@Component({

selector: 'app-sizer',
  template: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
_

親コンポーネントのテンプレートで、次のようにsizeに双方向バインディングを作成します。

_<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
_

これ（双方向バインディング）はプロパティバインディングの単なる構文糖なので、次と同等です。

_<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
_

propにInputと呼ばれるpropプロパティと、Outputという名前のイベント（propChangeプロパティ）がある場合、[(prop)]構文を使用できます。

コードは次のとおりですangularドキュメント詳細については、このアドレスに移動してください： https://angular.io/guide/template-syntax#two-way-binding--- =

5
komron

たとえば、@Output()を使用します

@Output() event: EventEmitter<Type> = new EventEmitter();

emit関数を介してデータを送信する

send(): void {
  this.event.emit(data);
}

EventEmitter の詳細を読む

0
Shailesh Ladumor