[解決済み] Angular2 コンポーネント @Input 2ウェイバインディング

質問

データ駆動型のAngularアプリケーションを持っています。 私はトグルコンポーネントを持っており、トグル状態を渡します。 私の問題は、オブジェクトとしてtoggleブーリアンを渡さない限り、2つのデータバインディングが動作しないように見えることです。 これを動作させる方法はありますか？ 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;

}

親コンポーネント.html

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>

どのように解決するのですか？

以下のような場合 [(toggled)]="..." を動作させるには

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

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

参照 双方向バインディング

[UPDATE】～2019年6月25日

以下、@Mitchさんのコメントより。

注目すべきは @Output と同じ名前でなければなりません。 @Input の名前と同じでなければなりませんが Change を末尾につけてください。呼び出すことができません。 onToggle などとすることはできません。構文上の決まりなんです。