Angular 2: 无法通过两种方式绑定到自定义组件中

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 个实例的父组件。 - 第一个实例工作正常，但使用分离的属性 [] 和事件 () 绑定 - 第二种是使用两种方式绑定 [()] 但不起作用。知道我错过了什么吗？

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 事件发射器，因为您要绑定到 checked 属性。命名略有偏差（checkChange vs checkedChange），因此它不允许您设置的双向绑定。

Demo Here

Angular 2: 无法通过两种方式绑定到自定义组件中

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

custom-component

angular