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

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

update

angular2在看起来更改检测本身时会导致此错误，这会导致模型变化，该副作用通常表明导致Angular2应用程序的错误或设计缺陷。

>

to hide 这样的问题您可以启用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通过变更检测更新时，这是必要的

另一种方法是使用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));
        }
      }
    }
}

这两种方法之间的区别是第一个更改执行代码，仅对由绑定引起的更改执行。