Угловая переменная 7-Sharing между компонентами динамически - PullRequest
Новая
       30

Угловая переменная 7-Sharing между компонентами динамически

0 голосов
/ 14 марта 2019

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

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

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

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

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

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

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

Оцените вашу поддержку заранее.

enter image description here

1 Ответ

0 голосов
/ 14 марта 2019

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

В вашем случае я рекомендую вам использовать 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; 
  }
...