angular - 如何更改传入的@Input 值并发出@Output

Question

我知道这个问题与Angular Component Interaction非常相似，但我的问题有点不同。

我也看过ExpressionChangedAfterItHasBeenCheckedError错误，但我无法解决我的问题。

我需要能够更改传入的输入值并将其发送到父组件。当输入值为 时empty string，我想将其更改为null

这是我的代码：

value: string;

@Input('ngModel') 
set ngModel(value: string) {

    if(value == '')
    {
      this.value = null;
      this.ngModelChange.emit(null);
    }
    else
    {
      this.value = value;
    }
}
get ngModel(): string {
    return this.value;
}

@Output('ngModelChange')
ngModelChange: EventEmitter<string> = new EventEmitter<string>()

这会引发以下错误：

AddClassMajorComponent.html:24 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: '. Current value: 'model: null'.

我用过ChangeDetectorRef，但我无法成功。

我该如何解决？

谢谢你。

标签： angularangular-componentsangular2-changedetection

Answer 1

像这样尝试@Input 和@Output 语法

@Input() value: string;
@Output() messageToEmit = new EventEmitter<string>();
ngOnInit(){
    if(value == '') {
      this.value = null;
      this.messageToEmit.emit(null);
    }
    else {
      this.value = value;
    }
}