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

您不需要为此使用DoCheck，如果您只想在发生更改时通知父级，请改用ngModelChange 并发出值。所以加ngModelChange

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

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

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

你应该一切都好！希望这会有所帮助！