Ребенок не определяет родительские изменения Угловые 2

Question

Привет, у меня есть вопрос, как это реально работает. У меня есть родительский и дочерний компоненты 2 (я показываю только часть кода, потому что мой проект работы).

Таким образом, родительский компонент часть шаблона:

<product-empty [showHistoryMonth]="showHistoryMonth" [showHistoryAvg]="showHistoryAvg" 
      [SP_L_FCSQData]='SP_L_FCSQData' 
      [allHistoryAvgNames]="allHistoryAvgNames" [salesPlanId]="salesPlanId" [allHistoryChannels]="allHistoryChannels" [airingsNames]="airingsNames" 
      [allForecastMonthChannels]="allForecastMonthChannels" [forecastShows]="displayArry" 
      [allProductSummary]="allProductSummary" ></product-empty> 

и функции, которая имеет важное значение в этом случае:

private displayArry: string[] = []; 

getForecastDisplay(emit: any) { 
     if (emit.show) { 
      var index = this.displayArry.indexOf(emit.id); 
      if (index === -1) { 
       this.displayArry.push(emit.id); 
      } else { } 
     } else { 
      var index = this.displayArry.indexOf(emit.id); 
      this.displayArry.splice(index, 1); 
     } 
     this.forecastShows = emit; 
     console.log('forecast show', this.displayArry); 
    } 

и ребенка компонента куске:

export class FlexProductEmptyComponent implements DoCheck, OnInit, OnChanges { 
    ... 
    @Input() showHistoryMonth: boolean = false; 
    @Input() showHistoryAvg: boolean = false; 
    @Input() forecastShows: any; 
    ... 

Так вопрос в том, как данные передаются через родительский и дочерний. Сейчас я пытаюсь обнаружить родительские изменения в дочернем. EDIT: функция getForecastDisplay вызывается, когда другой компонент испускает данные и обновляет displayArry. Так что, как я думаю, когда переменная displayArry изменяется, она снова передается всем дочерним элементам, привязанным к родительскому объекту.

Я имею в виду, что я пытаюсь поймать тот момент, когда родительские данные изменились и передать его ребенку. Я использовал сеттер, и когда я установил в него консольный журнал, он только логгирует на init. Я использовал OnChanges с простым изменением и зарегистрировался только при запуске компонента; Но данные, когда они меняются, передаются дочернему компоненту (я знаю это, потому что я устанавливаю консольный журнал в doCheck и его показываю правильное значение).

Итак, главный вопрос заключается в том, как я могу поймать тот момент, когда родительский компонент передает данные в дочерние?

Answer 1

Существует множество способов обеспечения связи между родительскими и дочерними компонентами, наиболее очевидным из которых является input and output properties или через службы. Наблюдаемый - еще один вариант. Вот an example with BehaviorSubject(a special kind of Observable). Этапы заключаются в следующем:

• 'new' a BehaviorSubject в родительском, назовем его someRxx.
• передать объект BehaviorSubject дочернему элементу, используя свойство ввода, например <my-child [nameRxx]="someRxx"></my-child>.
• в шаблоне ребенка, используйте асинхронную трубу, например <h2>Hello {{nameRxx | async}}</h2>; или в дочернем компоненте, вы делаете nameRxx.subscribe(doSomething) (не отказывайтесь от подписки в ngOnDestroy)
• в родительском компоненте или его шаблоне, do someRxx.next(value), ребенок получит значение, когда вы делаете .next.

Наслаждайтесь.