2

我想在更改输入参数时执行一些操作。假设我有一个具有type输入变量的 DatePicker 组件，并且我想date在更改类型时对另一个变量执行一些操作。怎么做？

export class DatePicker {

    @Input()
    date: Date;

    @Output()
    dateChange = new EventEmitter();

    @Input()
    set type(type: string) {
        if (type === "today") {
            this.date = new Date();
            this.dateChange(this.date); // because of this change change detector will throw error
        }
    }

}

错误：表达式在检查后已更改。

4

1 回答 1

-3

更新

当看起来变更检测本身具有导致模型更改的副作用时，Angular2 会导致此错误，这通常表明导致 Angular2 应用程序工作效率低下的错误或设计缺陷。

要隐藏此类问题，您只需启用prodMode.

生命周期方法中模型更改的解决方法调用ChangeDetectorRef.detectChanges()以明确表明此模型更改是有意的

export class DatePicker {

    constructor(private cdRef:ChangeDetectorRef) {}

    @Input()
    date: Date;

    @Output()
    dateChange = new EventEmitter();

    @Input()
    set type(type: string) {
        if (type === "today") {
            this.date = new Date();
            this.dateChange(this.date); 
            this.cdRef.detectChanges();
        }
    }
}

原来的

您可以使用setTimeout() setTimeout()大锤方法，因为它会导致整个应用程序的更改检测周期。

@Input()
set type(type: string) {
    if (type === "today") {
        this.date = new Date();
        setTimeout(() => this.dateChange(this.date)); 
    }
}

这在通过变更检测更新时是必要的，type因为 Angular2 不喜欢变更检测导致变更。

另一种方法是使用ngOnChanges()，但这也被更改检测调用，也需要setTimeout()解决方法

export class DatePicker implements OnChanges {

    @Input()
    date: Date;

    @Output()
    dateChange = new EventEmitter();

    @Input()
    set type:string;

    ngOnChanges(changes:SimpleChanges) {
      if(changes['type']) {
        if (type === "today") {
            this.date = new Date();
            setTimeout(() => this.dateChange(this.date));
        }
      }
    }
}

这两种方法之间的区别在于，第一种方法为每次更改执行代码，最后一种仅针对由绑定引起的更改。

于 2016-07-03T14:28:39.043 回答