组件之间的Angular 7共享变量动态

Question

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

演示可在下面找到：

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

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

变量的原始组成部分：datepicker-range.ts

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

例如，如果您仅选择两天作为休假，则天数差变为2。但是，在孩子中，天数仍然是10。

提前感谢您的支持。

Answer 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; 
  }