Angular 2 方式绑定组件 - 检查后表达式已更改

Posted 2023-02-22

【中文标题】Angular 2 方式绑定组件 - 检查后表达式已更改

【英文标题】：Angular 2 way binding component - Expression has changed after it was checked

【发布时间】：2017-08-28 12:09:58

【问题描述】：

试图让两种方式绑定工作，但在检查异常后更改表达式。当模式更改为取消并且我想将值重置为空时，我得到了异常。我认为这是因为我在具有不同值的更改周期内发出但不知道如何避免？

<edit-field [mode]="mode" [(field)]="field"></edit-field>

我的组件是：

 export class EditFieldComponent implements OnChanges 
      @Input('mode') mode: string;
      @Input('field') field: string;
      @Output('fieldChange') fieldChange: EventEmitter<string> = new EventEmitter<string>();

     ngOnChanges() 
         if(this.mode == 'cancel')
         this.field = "";
         this.fieldChange.emit("");
    
  

【问题讨论】：

一种解决方法是手动解耦 2 路绑定：将 Input 绑定到组件中，并将组件中的 Eventemitter 绑定到输出，但不要使用“同一个”。当想要 2 路绑定到必须操作传入数据的组件时，这是最简洁的方法。

【参考方案1】：

Angular 不喜欢更改检测导致模型更改。 ngOnChanges 被变更检测调用。

要么将代码移动到另一个不会导致此错误的回调（我认为ngAfterViewChecked 有效），要么使用setTimeout()

 export class EditFieldComponent implements OnChanges 
      @Input('mode') mode: string;
      @Input('field') field: string;
      @Output('fieldChange') fieldChange: EventEmitter<string> = new EventEmitter<string>();

     ngOnChanges() 
         if(this.mode == 'cancel')
           setTimeout(() => 
             this.field = "";
             this.fieldChange.emit("");
           );
         
    
  

【讨论】：

谢谢，我希望生命周期挂钩能够工作。 AfterViewCheck 没有，我得到了同样的异常。设置超时有效，但似乎有点 hacky。现在我启用了 prod 模式。如果现在有更好的解决方案，请留下问题。

启用 prod 模式是恕我直言最糟糕的方法。你也可以试试ngAfterViewInit。 AFAIR 至少有一个回调有效。最好的方法是不要更改ngOnChanges 中的模型。让field 成为二传手并在那里添加代码怎么样？不知道this.fieldChange.emit("")会不会在那里出问题。

ngAfterViewInit 每个组件仅调用一次，因此无法正常工作。如何按照您的建议更新 html 以允许设置器。谢谢！

private _field: string; @Input('field') set field(value:string) this._field = value; /* other code */; get field() :string return this._vield;

我明白了。我错过了您希望在每次更改时都调用它。二传手可能会有所帮助。我不记得它是否可以解决错误消息。