Угловая 2 - изменение входной переменной соседа при изменении входной переменной

Question

Я хочу выполнить некоторые операции при изменении входных параметров. Допустим, у меня есть компонент DatePicker, который имеет входную переменную type, и я хочу выполнить некоторые действия с другой переменной 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)); 
     } 
     } 
    } 
} 

Разница между этими двумя подходами в том, что первый выполняет код для каждого изменения, последний только для изменений, вызванных привязками.