Question

我想在更改输入参数时执行一些操作。假设我有一个具有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
        }
    }

}

错误：检查后表情发生了变化。

Answer 1

<强>更新

当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));
        }
      }
    }
}

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

Angular 2 - 在输入变量更改时更改邻居输入变量

1 个答案: