Pasar datos entre componentes en Angular 2
- Use el decorador de entrada para pasar datos de componentes principales a secundarios en Angular 2
-
Use la salida y el
EventEmitterpara pasar datos de componentes secundarios a principales en Angular 2 - Use el servicio para pasar datos entre componentes en Angular 2
Este artículo le mostrará cómo pasar datos entre dos componentes en Angular 2.
Use el decorador de entrada para pasar datos de componentes principales a secundarios en Angular 2
Padre a hijo a través del decorador Input() se utiliza cuando un componente principal necesita comunicarse con su componente secundario. El componente principal envía datos o realiza acciones en el componente secundario.
Funciona proporcionando datos a través de la plantilla utilizando el decorador @Input(). Esto se utiliza para modificar y rastrear la configuración de entrada del componente.
Los siguientes ejemplos de código demostrarán cómo crear este tipo de relación entre dos componentes utilizando el decorador de entrada en Angular 2.
Código TypeScript (App.component.ts):
import { Component } from '@angular/core';
import { Demo } from './Demo';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
DemoEx:Demo[] = [
new Demo('First Example'),
new Demo('SECOND Example')
];
}
Código TypeScript (input.component.ts):
import { Component, OnInit, Input} from '@angular/core';
import { Demo } from '../Demo';
@Component({
selector: 'app-demo',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class inputCom implements OnInit {
@Input() Demo: Demo;
constructor() { }
ngOnInit() {
}
}
Código HTML (app.component.html y input.component.html):
<main>
<section>
<div class="card">
<header>{{Demo.name}}</header>
</div>
</section>
</main>
<h3>Parent to child Component Interaction in Angular</h3>
<app-demo *ngFor="let Demo of DemoEx" [Demo]="Demo"></app-demo>
Haga clic aquí para ver la demostración en vivo del código anterior.
Use la salida y el EventEmitter para pasar datos de componentes secundarios a principales en Angular 2
EventEmitter es una clase que puede emitir eventos personalizados. Es un componente de Angular 2 que le permite usar el patrón observable en las aplicaciones de Angular 2.
Este componente ofrece una alternativa al patrón de devolución de llamada tradicional y simplifica el proceso de activar la detección de cambios cancelando la suscripción de observables cuando ya no se necesitan.
El siguiente ejemplo muestra cómo el componente principal se suscribe al evento y cambia su comportamiento en consecuencia.
Código TypeScript (parent.component.ts):
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'parent',
template: '<button (click)="DemoEx()">Click here to go to the next component</button>',
})
export class ParentComponent {
@Input() name: string;
@Output() SampleEx = new EventEmitter<string>();
DemoEx() {
this.SampleEx.emit(this.message)
}
message: string = "You are in Child Component";
}
Código TypeScript (app.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
message:string='';
NextCom($event) {
this.message = $event;
}
}
Código HTML (aplicación.componente.html):
<parent name="{{ name }}" (SampleEx)="NextCom($event)"></parent>
<br/>
<br/>
{{message}}
Haga clic aquí para ver la demostración en vivo del ejemplo anterior.
Use el servicio para pasar datos entre componentes en Angular 2
Un servicio es una clase que implementa la interfaz Inyectable. Debe tener métodos anotados con Injectable Decorator e implementar una o más interfaces si es necesario.
Se debe usar un servicio compartido cuando se transmiten datos a través de componentes que no tienen un enlace directo. Cuando los datos necesitan estar en sync todo el tiempo, el BehaviorSubject de RxJS es muy útil.
Podemos establecer el nombre como un observable que se puede modificar usando el método the.next() usando BehaviorSubject. Luego podemos extraer el último valor como datos sin procesar usando la función getValue().
El valor actual se guarda en BehaviorSubject. Como resultado, el componente siempre leerá el valor de datos más reciente en BehaviorSubject.
Vea el ejemplo a continuación.
Código TypeScript (first.component.ts):
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
selector: 'app-demo1',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
sharedData: string;
data: any;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedData$
.subscribe(sharedData => this.sharedData = sharedData);
}
updateData() {
this.sharedService.setData(this.data);
}
}
Código TypeScript (segundo.componente.ts):
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
selector: 'app-demo',
templateUrl: './second.component.html',
styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
sharedData: string;
data: any;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedData$
.subscribe(sharedData => this.sharedData = sharedData);
}
updateData() {
this.sharedService.setData(this.data);
}
}
Código HTML:
<h3>2nd Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
Saved Data {{ sharedData }}
<h1>Example of Unrelated Components: Sharing Data with a Service</h1>
<h3>1st Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
SavedData {{ sharedData }}
El beneficio de pasar datos entre componentes es que puede comprender mejor su proyecto al dividirlo en partes más pequeñas, lo que le permite concentrarse sin la carga de cientos de líneas de código.
Un equipo también puede operar de manera más productiva si cada desarrollador trabaja en componentes separados.
Haga clic aquí para ver la demostración en vivo del ejemplo anterior.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook