Angular 2 : cannot get two ways binding to work in custom component

Question

我正在尝试制作一个简单的 Angular 2 组件来显示开关按钮。 它几乎可以工作，除了使用 ngModel 时父值没有更新。

这是我的自定义组件:

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

@Component({
selector: 'app-switch',
template:` 
<label class="switch">
  <input id="switch" type="checkbox" [(ngModel)]="checked">
  <div class="slider round"></div>
</label> `,   
styleUrls: ['./switch.component.css']
})
export class SwitchComponent {

    checkValue:boolean;
    @Output() checkChange = new EventEmitter();

    @Input()
    get checked() {
      return this.checkValue;
    }

    set checked(val) {
       this.checkValue = val;
       this.checkChange.emit(this.checkValue);
       console.log("from switch: value = " + this.checkValue);    
    }
}

这是带有 2 个自定义子组件实例的父组件。 - 第一个实例工作正常，但使用分离的属性 [] 和事件 () 绑定(bind) - 第二种是使用两种方式绑定(bind) [()] 但不起作用。知道我错过了什么吗？

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:`
  <app-switch [checked]="checkValue" (checkChange)="onCheckChanged($event)"></app-switch>
  <div>checkBox :<span>{{checkValue}}</span></div>
  <hr/>
  <app-switch [(checked)]="switchValue" ></app-switch>
  <div>checkBox :<span>{{switchValue}}</span></div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  checkValue:boolean = false;
  switchValue:boolean = false;

  onCheckChanged($event){
    console.log("from AppComponent : " + $event);
    this.checkValue = $event;

  }
}

对此有什么建议吗？

Answer 1

您的第二个实例需要一个输出 checkedChange 事件发射器，因为您要绑定(bind)到 checked 属性。命名稍有偏差(checkChange 与 checkedChange)，因此它不允许您设置的双向绑定(bind)。

Demo Here