Question

我试图制作一个显示开关按钮的简单角度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个自定义子组件实例的父组件。 - 第一个实例工作正常，但使用分离的property []和event（）绑定 - 第二个使用两种方式绑定[（）]但不起作用。知道我错过了什么吗？

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：无法在自定义组件

1 个答案: