组件之间的Angular 7共享变量动态 [英] Angular 7-Sharing variable between components dynamically

问题描述

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

I am trying to share a variable between two components. I was able to do so. However, when the variable's value is changed in the parent component, it is not reflected in the child one.

演示可以在下面找到:

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

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

Name of the variable: DiffDate...Original value: 10

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

Original component of the variable: datepicker-range.ts

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

Child component to use the variable: app.component.ts

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

For instance, if you selected only two days as vacation, the difference in days becomes 2. However, in the child, it is still 10.

提前感谢您的支持.

推荐答案

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

Short version, components don't share variables with one another without assistance.

在您的情况下，建议您使用EventEmitter来识别app.component是您的父母，而datepicker-range是您的孩子.通过EventEmitter，您可以触发父级可以订阅的更改(即数据更改)中的事件.

In your case, I recommend you use an EventEmitter recognizing that the app.component is your parent and the datepicker-range is your child. The EventEmitter will allow you to trigger events from the change (i.e. data changes) that the parent can subscribe to.

这是关于在组件之间共享数据的精彩视频: https://www .youtube.com/watch?v = I317BhehZKM

This is an awesome video on the subject of sharing data between components: https://www.youtube.com/watch?v=I317BhehZKM

更新您的导入以包括EventEmitter和Output

Update your imports to include EventEmitter and Output

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

将输出变量声明为事件订阅源，供父级订阅

Declare output variable as event emitter for the parent to subscribe to

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

每次计算差异值时发出一个事件this.dateDifferenceEvent.emit(daysDiff);，以便父级可以对此进行操作

Emit an event everytime the difference value is calculated this.dateDifferenceEvent.emit(daysDiff); so the parent can act on it

 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模板绑定中使用该名称.

app.component.ts

Add the variable to your parent comonent - app.component.ts Keep in mind this in only named DiffDate to match the {{DateDiff}} binding you added in your app.component.html. This can be whatever you want it to be as long and you use that name in your html template binding.

DiffDate: number;

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

Add a method to handle the event from the child and update your parent component DateDiff variable with it

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

这篇关于组件之间的Angular 7共享变量动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！