如何在Angular中获取同级div的高度并将数据发送给同级组件

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

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

在Angular中，我们可以执行这些步骤。

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

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

环境搭建:

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

npm install -g @angular/cli
ng new <project-name>
cd <project-name>

步骤:

创建2个新的组件，命名为sibling1和sibling2，这将创建两个新的目录，每个目录中有4个文件。

ng g c sibling1
ng g c sibling2

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

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<any> = new EventEmitter();
  send(e){
    let data = e.target.value;
    this.emitter.emit(data);
  }
}

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

标签。

<input type="text" (keyup)="send($event)">
  
<p>Height of Sibling is {{height}}</p>

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

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<any> = new EventEmitter();
  
  send(){
    let height = document.querySelector('div').offsetHeight;
    this.emitter.emit(height);
  }
}

这里我们使用了DOMCharacterDataModified事件来检测插入新数据时DIV的变化。数据数组中的元素被显示在内部的<p>标签。

<div id="targetDiv" (DOMCharacterDataModified)="send()">
    <p *ngFor="let d of data">{{d}}</p>
      
</div>

现在我们必须将这些组件添加到app组件中。在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中显示这些组件。

<app-sibling1 
              [height]="height" 
              (emitter)="mergeData( $event)"> </app-sibling1> <app-sibling2 [data]="data" (emitter)="mergeHeight($ event)">
</app-sibling2>

现在运行该应用程序，使用。