Angular2 - 双方向バインディングのエラー：チェックした後に式が変更されました

Question

テキストを入力するための単純なコンポーネントを作成しようとしています。 値が変更されたときにエラーが発生しました。

私はすでにこのエラーに関する記事を確認しています。 そのうちの1人が「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); 
} 

あなたはすごくいいはずです！お役に立てれば！