Question

我有一个复选框组件（我自己的设计）并像这样使用它：

主要组成部分：

 let allowChenge = false;
    let field = {
       text: 'text text text',
       visible: true
    }

checkField(value: boolean, field: any) {
   // when I get value=false 
   if (this.allowChenge) {
      this.field.visible = value;
   } else {
      this.field.visible = true;
   }
}

主要组件HTML：

<p-checkbox 
   [value]="field.visible"
   [text]="field.text"
   [readonly]="false"
   (onSelect)="checkField($event, field)"
></p-checkbox>

复选框组件：

@Component({
    selector: 'p-checkbox',
    template: `
        <div style="float: left;">                        
                <label 
                   class="switch" 
                   [class.checked]="value" 
                   [style.opacity]="readonly ? '0.4' : '1.0'"
                >
                   {{ text }}
                </label>            

        </div>
    `
})
export class CheckBoxComponent {    

    @Input() value: boolean;    
    @Input() readonly: boolean = false;    
    @Input() text: string;    

    @Output() onSelect: EventEmitter<any> = new EventEmitter();

    constructor(public _elRef: ElementRef) {

    }    

    ngOnChanges(changes: any) {
        this.value = changes.value.currentValue;
    }    

    select() {
        if (!this.readonly) {
            this.value = !this.value;
            this.onSelect.emit(this.value);
        }        
    }     
}

我遇到一些情况，当我点击复选框时，我不需要更改field对象visible值。当field.visible = true和我点击ckeckbox时，复选框this.value变为false。然后在父组件上，我将其设置回true。但是复选框表示值false。

Answer 1

从更改检测器的角度来看，没有任何变化，因此它不会将更改从父项传播到子项。我已在这里回答了这样一个问题：

Angular 2 - Checkbox not kept in sync

您可以在答案中获得更多详细信息，例如为什么会发生这种行为（我已经绘制了一个很好的模式^ _ ^）。

tldr;

checkField(value: boolean, field: any) {   
  this.field.visible = value;
  if (!this.allowChange) {
      setTimeout(()=>this.field.visible = true);
   }
}

不是将参数传递给复选框以避免选择会更好。为什么不像[readonly]="!allowChange"？

检测Angular2上内部组件的变化？

1 个答案:

tldr;