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

Демонстрацию можно найти ниже:

https://stackblitz.com/github/abdelrahman84/Vacation-Planner-Angular ?fbclid=IwAR1gS4ScuGo9mOybQWwrZeGkmKz6MV3QM5d3_bSl0cIxkAXpw7jRu60XOmM

Имя переменной: DiffDate…Исходное значение: 10

Исходный компонент переменной: datepicker-range.ts

Дочерний компонент для использования переменной: app.component.ts

Например, если вы выбрали только два дня в качестве отпуска, разница в днях становится 2. Однако в дочернем элементе она по-прежнему равна 10.

Короткая версия, компоненты не обмениваются переменными друг с другом без посторонней помощи.

В вашем случае я рекомендую вам использовать EventEmitter, распознающий, что app.component является вашим родителем, а datepicker-range — вашим дочерним элементом. EventEmitter позволит вам запускать события от изменения (т. Е. изменения данных), на которые родительский элемент может подписаться.

Это потрясающее видео на тему совместного использования данных между компонентами: https://www.youtube.com/watch?v=I317BhehZKM

Вот решение, которое сработало для меня:

datepicker.range.ts

Обновите свой импорт, чтобы включить EventEmitter и Output

 import {Component, Input, Output, EventEmitter} from '@angular/core';
  

Объявить выходную переменную в качестве источника события, на которое родительский элемент должен подписаться

 @Output() dateDifferenceEvent  = new EventEmitter<number>();
  

Генерирует событие каждый раз, когда вычисляется значение разницы this.dateDifferenceEvent.emit(daysDiff); , чтобы родительский элемент мог воздействовать на него

  private calcDaysDiff(): number {

    const fromDate: Date = this.createDateFromNgbDate(this.fromDate);
    const toDate: Date = this.createDateFromNgbDate(this.toDate);  
    const daysDiff = Math.floor(Math.abs(<any>fromDate - <any>toDate) / (1000*60*60*24));

    this.dateDifferenceEvent.emit(daysDiff);

    return daysDiff;
  }
  

app.component.html

Обновите дочерний тег для привязки к дочерней выходной переменной dateDifferenceEvent

 <ngbd-datepicker-range (dateDifferenceEvent)="setDifference($event)"></ngbd-datepicker-range>
  

app.component.ts

Добавьте переменную в ваш родительский компонент — app.component.ts Имейте в виду это только в именованном DiffDate, чтобы соответствовать {{DateDiff}} привязке, которую вы добавили в свой app.component.html . Это может быть любой длины, которую вы хотите, и вы используете это имя в привязке вашего html-шаблона.

 DiffDate: number;
  

Добавьте метод для обработки события от дочернего элемента и обновите с его помощью DateDiff переменную вашего родительского компонента

   setDifference($event) {
    this.DiffDate = $event; 
  }