Angular2 - 양방향 바인딩의 오류 : 확인 후 표현식이 변경되었습니다.

Question

텍스트를 입력하는 간단한 구성 요소를 만들려고합니다. 값이 변경되면 오류가 발생했습니다.

이 오류에 대한 기사를 이미 확인했습니다. 그들 중 하나는 'enableProdMode()'를 사용해야한다고 말했습니다. 그건 사실이지만, 그것이 필수적인 해결책은 아니라고 생각합니다.

enableProdMode()보다 좋은 해결책을 알려주십시오.

@Component({ 
    selector: 'text-input', 
    template: '<input type="text" [(ngModel)]="value"/>', 
    inputs: [ 
     'value' 
    ] 
}) 
export class TextInput implements DoCheck { 
    @Input() value: string; 
    @Output() valueChange: EventEmitter<string> = new EventEmitter(); 

    ngDoCheck(): void { 
     console.log(`ngDoCheck: value=${this.value}`); 
     this.valueChange.emit(this.value); 
    } 
} 

-

@Component({ 
    template: ` 
     <h1>Input Components</h1> 
     <h2>Text Input</h2> 
     <div> 
      <text-input [(value)]='textValue'></text-input> 
     </div> 
     <div>{{textValue}}</div>` 
}) 
export class InputsPage { 
    textValue: string = 'Hello World'; 
} 

Answer 1

당신은 단지 변화가 일어난 경우, 부모를 알리는 대신 ngModelChange를 사용하여 값을 방출 할 경우, 이에 대한 DoCheck를 사용할 필요가 없습니다. 그래서 ngModelChange

<input type="text" [(ngModel)]="value" (ngModelChange)="emitValue()"/> 

@Input() value: string; 
@Output() valueChange: EventEmitter<string> = new EventEmitter(); 

emitValue(): void { 
    this.valueChange.emit(this.value); 
} 

을 추가하십시오. 그러면 모두 좋을 것입니다. 희망이 도움이!