【问题标题】：Angular 7-Sharing variable between components dynamicallyAngular 7-组件之间动态共享变量
【发布时间】：2019-08-05 16:55:35
【问题描述】：

我试图在两个组件之间共享一个变量。我能够这样做。但是，当变量的值在父组件中发生变化时，它不会反映在子组件中。

演示可以在下面找到：

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

变量名称：DiffDate...原始值：10

变量的原始组件：datepicker-range.ts

子组件使用变量：app.component.ts

例如，如果您只选择了两天作为假期，则天数的差值为 2。但是，在孩子中，它仍然是 10。

提前感谢您的支持。

【问题讨论】：

标签： data-binding angular7

【解决方案1】：

短版，组件不会在没有帮助的情况下相互共享变量。

在您的情况下，我建议您使用 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 以匹配您在 app.component.html 中添加的 {{DateDiff}} 绑定。这可以是您想要的任何长度，并且您可以在 html 模板绑定中使用该名称。

DiffDate: number;

添加一个方法来处理来自子组件的事件并使用它更新您的父组件DateDiff 变量

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

【讨论】：

非常感谢您的详细解决方案。这工作得很好。度过美好的一天