@Input @Output и EventEmitter в Angular 4

Question

Я создаю приложение с Angular 4 и Ionic 3, и я борюсь с компонентами:

Я создал компонент MesuresPreventionsComponent (извините, мой французский: p), этот компонент нуждается в списке изего родительский компонент (Ionic Page), но я также хотел бы, чтобы он мог обновлять список в родительском компоненте.

Так что я узнал о @Input и @Output и подумал, что буду использовать EventEmitterчтобы обнаружить изменения и обновить список от родителя.

Я прочитал этот Ответ переполнения стека и выяснил, как это сделать.

Так вот, что яdid:

@Output() targetChange: EventEmitter<Array<any>> = new EventEmitter<Array<any>>();

@Input() set target(value){
    this.target = value;
  };

Затем я отправляю свои данные по нажатию кнопки следующим образом:

alert.addButton({
    text: 'Ok',
    handler: (data: any) => {
      this.targetChange.emit(data);
      console.log('Radio data:', data)
    }
})

На моем родительском компоненте (ионной странице) я использую мой MesuresPreventionsComponent в шаблоне:

<mesures-preventions  [(target)]="conditionsGeneralesDeTravail.mesuresPreventionsConseillees" ></mesures-preventions>

Но дело в том, что @Input() set target(value) вызывается более 9000 раз при загрузке страницы, выдавая ошибку диапазона:

Uncaught (в обещании): RangeError:Превышен максимальный размер стека вызовов RangeError: Максимальный размер стека вызовов превышен в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:153:23) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [какtarget] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [как цель] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25) в MesuresPreventionsComponent.set [в качестве цели] (http://localhost:8100/build/0.js:154:25)

Я попытался сделать console.log в методе set target(value), и он действительно отображается 2 раза в секунду.

Я понятия не имею, почему этот метод выполняется в цикле.

Кто-нибудь может помочь?

Спасибо за ваше время :)

Answer 1

Вы вызываете цель внутри установщика цели.

Замените:

@Input() set target(value) {
  this.target = value;
};

На:

@Input() target;

Также нельзя использовать двунаправленную привязку [(target)] вы должны заменить его на [target].Если вы хотите создать компоненты с двунаправленной привязкой, посмотрите этот учебник alligator.io .