web-dev-qa-db-ja.com

Angular2コンポーネント@Input双方向バインディング

データドリブンAngularアプリケーションがあります。トグルされた状態で渡すトグルコンポーネントがあります。私の問題は、トグルブール値をオブジェクトとして渡さない限り、双方向のデータバインディングが機能しないように見えることです。これを機能させる方法はありますかEventEmitterを使用したり、変数をオブジェクトとして渡したりせずに。これは再利用可能なコンポーネントであり、アプリケーションはデータ駆動型であるため、オプションではなくオブジェクトとして値を渡します。私のコードは...

toggle.html

<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/>

toggle.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'toggle-switch',
  templateUrl: 'toggle-switch.component.html',
  styleUrls: ['toggle-switch.component.css']
})

export class ToggleSwitchComponent {

  @Input() toggleId: string;
  @Input() toggled: boolean;

}

parent.component.html

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>
angulartypescriptdata-bindingcomponentsdecorator
36
Steve Fitzsimons

[(toggled)]="..."が動作するために必要なもの

  @Input() toggled: boolean;
  @Output() toggledChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  changeValue() {
    this.toggled = !(this.toggled); 
    this.toggledChange.emit(this.toggled);
  }

双方向バインディング も参照してください

[更新]-2019年6月25日
以下の@Mitchのコメントより：
@Output名は@Input名と同じである必要がありますが、最後にChangeが付いていることに注意してください。 onToggleなどと呼ぶことはできません。これは構文規則です。

66
Günter Zöchbauer

質問には2年以上前のものがありますが、5セントを寄付したいと思います...

それは、Angularの問題ではなく、Javascriptの仕組みに関するものです...単純な変数（数値、文字列、ブール値など）は値によって渡されますが、複雑な変数（オブジェクト、配列）は参照によって渡されます。

これについての詳細は、Kyle SimpsonのシリーズYou's know jsで読むことができます。

https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference

そのため、@ Input（）オブジェクト変数を使用して、エミッター、オブザーバーなどを使用せずにコンポーネント間でスコープを共有できます。

// In toggle component you define your Input as an config object
@Input() vm: Object = {};

// In the Component that uses toggle componet you pass an object where you define all needed needed variables as properties from that object:
config: Object = {
    model: 'whateverValue',
    id: 'whateverId'
};

<input type="checkbox" [vm]="config" name="check"/>

これにより、すべてのオブジェクトプロパティを変更でき、同じ参照を共有するため、両方のコンポーネントで同じ値を取得できます。

0
manguiti