Угловой дочерний компонент не обновляется сразу - PullRequest
Новая
       39

Угловой дочерний компонент не обновляется сразу

0 голосов
/ 21 сентября 2018

Я изучаю Angular 6, я думал, что все делал правильно, но я сталкиваюсь с «проблемой-сомнением»

У меня есть родитель и ребенок:

  1. Мой родитель делится информацией с моим ребенком, используя привязку ввода
  2. Кнопка запускает функцию, в которой обновляется информация
  3. Немедленно родитель вызывает дочернюю функцию через @ ViewChild

A Stackblitz можно найти здесь

Мои родительские компоненты выглядят так:

HTML: 

This is the parent
<child [data]="my_data"></child>
<button (click)="fireAll()">Fire All!</button>

Машинопись: 

export class AppComponent  {
  @ViewChild(ChildComponent) childComp: ChildComponent;
  my_data = 'Nothing yet';

  public fireAll(){
    this.my_data = "I want to show this info in console";
    this.childComp.writeToConsole();
    //setTimeout(()=>this.childComp.writeToConsole(), 500); //This works well
  }

}

Ребенок: 

export class ChildComponent  {
  @Input() data: string;

  writeToConsole(){
    console.log(this.data);
  }
}

Проблема: Первый раз янажмите мою кнопку, я ожидаю увидеть в консоли «Я хочу показать эту информацию в консоли», вместо этого я получаю «Ничего еще».Но если я нажму еще раз, ожидаемый результат будет достигнут.Я полагаю, что есть задержка между передачей родительских данных дочернему элементу, потому что если я использую setTimeout для небольшого удержания, все работает нормально.

Мои вопросы:

  1. Каков наилучший способ отправки данных от родителя к ребенку и немедленного их использования у ребенка?
  2. Что я делаю не так?

Действительно признателен за вашу помощь, спасибо

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

На самом деле все работает нормально.Вы испытываете следующее:

  1. Вы нажимаете кнопку
  2. Вы обновляете my_data
  3. Вы вызываете метод ребенка writeToConsole.
  4. В данный момент обнаружение изменений все еще оценивает все компоненты
  5. Дочерний объект еще не обновлен, поэтому вы по-прежнему получаете старые данные
  6. Обнаружение изменений завершено, новыеданные передаются

В вашей настройке журнал консоли всегда будет на один шаг от того, что вы ожидаете.Вы вызываете метод раньше, чем обнаружение изменений сможет выполнить его работу.В момент, когда вы вводите задержку (setTimeout), обнаружение изменений будет выполнено до того, как вы вызовете метод.Вот почему это «работает» в ваших глазах.

Во всем все работает нормально.Родитель не должен вызывать метод ребенка.Он должен просто предоставить данные ребенку.

Если вы хотите использовать новое значение как можно скорее, вам следует ввести OnChanges.Он информирует вас о поступлении новых данных в компонент. 

ngOnChanges(): void {
  console.log('onChanges', this.data);
}
0 голосов
/ 21 сентября 2018

Я обновил ваш стек.При первом щелчке у меня сначала появляется надпись «Я хочу показать эту информацию в консоли».

Пример Stackblitz

...