Saltar al contenido

Cómo pasar datos de una componente a otro en angularJun, 6thIn este tutorial, vamos a aprender sobre comunicación de componentes …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de la comunicación componente angular con los ofexamples de ayuda.

@Input

angular nos proporciona @Input decorador mediante el uso que podemos pasar datos de un objeto primario componente tochild componente.

Veamos un ejemplo

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

@Component({
selector: 'app-child',
templateUrl: './childcomponent.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() name: string;
}

En el código anterior en primer lugar, hemos importado un decorador de entrada del paquete / núcleo @ angular y añadió ITIN frente de la propiedad nombre para que pueda pasar datos a disposición del componente principal.

{{name}}

Al pasar los datos de un componente de los padres el tiempo de

Es para pasar los datos del componente principal.

Welcome to angular world

En el código anterior, que están pasando los datos a un componente secundario mediante el uso de un nombre de propiedad = “gowtham”.

Pasar valores dinámicos

También puede pasar valores dinámicos a un componente secundario envolviendo la propiedad con [] corchetes.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
myname = 'Gowtham';}

Welcome to angular world

Escucha de eventos de componente menor al padre

En nuestro caso, si queremos cambiar nombre, tenemos que emitir un evento personalizado de nuestro componente secundario. El padre reacciona componente para ese evento personalizado.

Dentro de nuestro componente secundario en primer lugar, estamos importando un decorador de salida y EventEmitter del paquete @ angular / núcleo.

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

@Component({
selector: 'app-child',
templateUrl: './childcomponent.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() name: string;
@Output() changeName = new EventEmitter();
updateName() {
// emitting changeName custom event this.changeName.emit(); }
}

{{name}}

Aquí estamos emitiendo un evento personalizado llamado changename, cada vez que alguien hace clic en un botón.

Dentro de nuestro componente aplicación, que se detecta el evento changename e invoca el método onchangeName.

Welcome to angular world

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
myname = 'Gowtham';

onchangeName() { this.myname = 'Angular'; }}