Question

我试图创建一个简单的组件来输入文本。但是当它的值发生变化时会发生错误。

我已经检查了一些有关此错误的文章。其中一个人说'应该使用enableProdMode（）＆＃39;。这当然是对的，但我认为这不是一个必不可少的解决方案。

请告诉我一个比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);
}

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

Angular2 - 双向绑定错误：检查后表达式已更改

1 个答案: