En esta publicación, veremos cómo podemos obtener la altura de div dinámico en un componente y enviarlo a su componente hermano en Angular. Esta tarea necesita una comprensión de algunos conceptos básicos angulares y DOM. En angular, podemos enviar y recibir datos a hermanos usando muchos métodos y uno de ellos es a través del padre. Vea la figura a continuación.
En Angular podemos realizar estos pasos:
- Cree un objeto EventEmitter<T> y envíe datos al padre utilizando el decorador @Output() .
- Reciba datos del padre utilizando el decorador @Input() .
- Calcule la altura de div usando la propiedad offsetHeight de DOM y envíela de vuelta al padre.
- Recibir la altura de los padres.
Demostremos estos pasos usando un ejemplo simple. Crearemos dos componentes: sibling1 y sibling2 . En sibling1, tomaremos la entrada separada por comas del usuario y la usaremos para completar dinámicamente sibling2. El componente sibling2 devolverá dinámicamente su altura a sibling1 a través del padre.
Requisitos previos : NPM debe estar instalado.
Configuración del entorno:
-
Instale Angular y cree un nuevo proyecto.
npm install -g @angular/cli ng new <project-name> cd <project-name>
Pasos :
-
Cree 2 nuevos componentes llamados sibling1 y sibling2, esto creará dos nuevos directorios con 4 archivos en cada uno.
ng g c sibling1 ng g c sibling2
En el código anterior, hemos establecido la variable de altura como entrada para este componente usando el decorador @Input() . El objeto emisor es un objeto EventEmitter . En el método send() , estamos usando el valor del elemento de destino y emitiendo los datos.
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<any> = new EventEmitter(); send(e){ let data = e.target.value; this.emitter.emit(data); } }
Hay un campo de entrada que usa el método send() en el evento keyup . Para mostrar la variable altura , hemos utilizado una etiqueta <p>.
sibling1.component.html
<input type="text" (keyup)="send($event)"> <p>Height of Sibling is {{height}}</p>
En este archivo, hemos configurado la variable de datos como objeto de entrada y emisor para emitir la altura. En el método send() , hemos emitido la altura del componente div. Ahora agregue el siguiente código a 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<any> = new EventEmitter(); send(){ let height = document.querySelector('div').offsetHeight; this.emitter.emit(height); } }
Aquí hemos utilizado el evento DOMCharacterDataModified para detectar cambios en div al insertar nuevos datos. Los elementos en la array de datos se muestran en la etiqueta interna <p>.
sibling2.component.html
<div id="targetDiv" (DOMCharacterDataModified)="send()"> <p *ngFor="let d of data">{{d}}</p> </div>
Ahora tenemos que agregar estos componentes al componente de la aplicación. Agregue el siguiente código a app.component.ts para crear variables para transferir datos entre hermanos:
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; } }
Las variables de altura y datos se utilizarán como entrada para los componentes. Los métodos mergeData() y mergeHeight() establecerán los datos en estas variables. Ahora muestra estos componentes en app.component.html :
app.component.html
<app-sibling1 [height]="height" (emitter)="mergeData($event)"> </app-sibling1> <app-sibling2 [data]="data" (emitter)="mergeHeight($event)"> </app-sibling2>
Ahora ejecuta la aplicación usando:
ng serve -o
Salida: Debería ver la siguiente salida.
Tenga en cuenta que los datos enviados a otro componente se utilizan para aumentar o disminuir dinámicamente la altura de div que se envía al componente hermano.
Publicación traducida automáticamente
Artículo escrito por mukulbindal170299 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA