Data binding 动态地在组件之间共享角度7变量

我试图在两个组件之间共享一个变量。我能够做到这一点。但是，在父组件中更改变量的值时，它不会反映在子组件中

演示可以在下面找到：

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

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

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

例如，如果仅选择两天作为假期，则天数差变为2。然而，在孩子身上，它仍然是10岁

提前感谢您的支持

---

简短版本，组件在没有帮助的情况下不会彼此共享变量

在您的情况下，我建议您使用EventEmitter来识别

app.component

是您的父母，而

datepicker范围是您的孩子。EventEmitter允许您从父级可以订阅的更改（即数据更改）触发事件

这是一个关于组件间共享数据的精彩视频：

以下是一个对我有效的解决方案：
datepicker.range.ts
更新导入以包括EventEmitter和输出

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

将输出变量声明为父级要订阅的事件发射器

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

app.component.html
更新子标记以绑定到子输出变量
dateDifferenceEvent

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

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

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

非常感谢您详细的解决方案。这是非常好的工作。祝你有美好的一天
DiffDate: number;

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