Angular 2：无法获得两种方式在自定义组件中的绑定

我正试图做一个简单的角度2组件显示一个开关按钮。它几乎工作，但使用ngModel时父值不更新。Angular 2：无法获得两种方式在自定义组件中的绑定

这里是我的自定义组件：

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; 

    } 
}

对此有何建议？

来源

2017-03-29 Julien

由于您绑定了checked属性，您的第二个实例需要输出checkedChange事件发射器。命名稍微偏离（checkChange vs checkedChange），所以它不会允许您设置的双向绑定。

Demo Here

来源

2017-03-29 12:14:58

所以，如果我理解正确的输出变量实际上是输入变量名+“变”串联？ – Julien

是的。这是针对相同属性名称设置的特定命名约定。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way –

Angular 2：无法获得两种方式在自定义组件中的绑定

回答

相关问题