如何获得同级div的高度并将数据发送到Angular中的同级组件？

在这篇文章中，我们将看到如何在一个组件中获取动态div的高度并将其发送到Angular中的同级组件。该任务需要了解一些基本的角度和DOM概念。在角度上，我们可以使用许多方法向同级兄弟发送和接收数据，其中一种方法是通过父级。参见下图。

在Angular中，我们可以执行以下步骤：

• 创建一个EventEmitter 对象，并使用@Output()装饰器将数据发送给父对象。
• 使用@Input()装饰器从父级接收数据。
• 使用DOM的offsetHeight属性计算div的高度，并将其发送回父级。
• 接收父母的身高。

让我们使用一个简单的示例来演示这些步骤。我们将创建两个组件： sibling1和sibling2 。在sibling1中，我们将从用户处获取逗号分隔的输入，并使用它动态填充sibling2。 sibling2组件将通过父级将其高度动态发送回sibling1。

先决条件：必须安装NPM。

环境设置：

• 安装Angular并创建一个新项目。

  npm install -g @angular/cli
  ng new 
  cd 

  脚步 ：

• 创建两个名为sibling1和sibling2的新组件，这将创建两个新目录，每个目录中包含4个文件。

  ng g c sibling1
  ng g c sibling2

在上面的代码中，我们使用@Input()装饰器将height变量设置为该组件的输入。发射器对象是EventEmitter对象。在send()方法中，我们使用目标元素的值并发出数据。

sibling1.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  
@Component({
  selector: 'app-sibling1',
  templateUrl: './sibling1.component.html',
  styleUrls: ['./sibling1.component.css']
})
export class Sibling1Component implements OnInit {
  
  constructor() { }
  
  ngOnInit(): void {
    this.height = 0;
  }
  
  @Input() height;
  
  @Output() emitter:EventEmitter = new EventEmitter();
  send(e){
    let data = e.target.value;
    this.emitter.emit(data);
  }
}

有一个输入字段，该输入字段在keyup事件上使用send()方法。为了显示height变量，我们使用了

标签。

sibling1.component.html

  
Height of Sibling is {{height}}

在此文件中，我们将数据变量设置为输入和发射器对象以发射高度。在send()方法中，我们发出了div组件的高度。现在，将以下代码添加到sibling2.component.html：

sibling2.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  
@Component({
  selector: 'app-sibling2',
  templateUrl: './sibling2.component.html',
  styleUrls: ['./sibling2.component.css']
})
export class Sibling2Component implements OnInit {
  
  constructor() { }
  
  ngOnInit(): void {
    this.data = [];
  }
  @Input() data;
  @Output() emitter:EventEmitter = new EventEmitter();
  
  send(){
    let height = document.querySelector('div').offsetHeight;
    this.emitter.emit(height);
  }
}

在这里，我们使用了DOMCharacterDataModified事件来检测插入新数据时div中的更改。数据数组中的元素显示在内部

标记中。

sibling2.component.html

    
{{d}}
      

现在，我们必须将这些组件添加到应用程序组件。将以下代码添加到app.component.ts中，以创建变量以在同级之间传输数据：

app.component.ts

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  height;
  data;
  
  ngOnInit(){
    this.height = 0;
    this.data = [];
  }
  mergeData(data){
    // Convert the string to array of strings
    this.data = data.split(",");
  }
  mergeHeight(height){
    this.height = height;
  }
}

高度和数据变量将用作组件的输入。 mergeData()和mergeHeight()方法会将数据设置为这些变量。现在在app.component.html中显示这些组件：

现在使用以下命令运行该应用程序：

ng serve -o

输出：您应该看到以下输出。

请注意，发送到其他组件的数据用于动态增加或减少发送到同级组件的div的高度。