Angular @Ввод связи с использованием функции, вызываемой несколько раз - PullRequest
Новая
       15

Angular @Ввод связи с использованием функции, вызываемой несколько раз

0 голосов
/ 10 января 2020

Я использую Angular 8 .

У меня есть дочерний компонент с одним свойством @Input(). Этот вход необходимо изменить перед привязкой и, таким образом, использовать метод для возврата данных для привязки, например 

<app-child [info]="getInfo()"></app-child>

. И в родительском компоненте getInfo() возвращает значение, например 

getInfo(): any|null {
  console.log('called...');

  if (this.data) {
    return JSON.parse(this.data);
  }

  return null;
}

Но таким образом, метод вызывается снова и снова всякий раз, когда в дочернем компоненте происходит какое-то событие.

Пример Stackblitz: https://stackblitz.com/edit/angular-child-com

Произведите ошибку:

Форма отображается из дочернего компонента, который принимает входные данные от метода, как описано выше.

Нажмите любую кнопку или поле ввода, и вы увидите строку печати журнала консоли из вызова метода с каждым событием .

Это приводит к многократному запуску события OnChange в дочерних компонентах.

Ответы [ 2 ]

1 голос
/ 11 января 2020

Go без состояний с асин c труб . Я думаю, что это ближе к тому, что вы хотите сделать в любом случае. Я использую асин c трубы везде, где это возможно, потому что это чище, чем использование свойств для всего - тоже меньше непредвиденных последствий. 

@Component({
  selector: 'app-parent',
  template: '<app-child [info]="info$ | async"></app-child>',
})
export class ParentComponent implements OnInit {
  info$ = this.service.getData().pipe(
    map(data => JSON.parse(data))
  );

  constructor(private service: MyService) { }
}
1 голос
/ 10 января 2020

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

@Component({
  selector: 'app-parent',
  template: '<app-child [info]="info"></app-child>',
})
export class ParentComponent implements OnInit {
  info;

  constructor(private service: SomeDataservice) {}

  ngOnInit() {
    this.info = this.service.getData();
  }
}
...