¿Cómo comunicarse entre componentes en Angular?

Estoy trabajando en un proyecto de aplicación web y estoy tratando de usar Angular, tengo algún problema con la comunicación de componentes. Por ejemplo, cómo un componente principal intercambia datos con componentes secundarios, cómo comunicarse entre componentes hermanos.

Si está tratando de comunicarse desde un componente principal a un componente secundario, esto se describe muy claramente utilizando @Input y EventEmitters con @Output en los documentos angulares.

Interacción angular de 2 componentes

En cuanto a la comunicación entre hermanos, publiqué una respuesta en una pregunta similar que podría ayudar con el problema de compartir datos entre componentes hermanos. Actualmente, creo que el método de servicio compartido es el más eficiente.

angular-2-hermano-componente-comunicación

Usando un servicio:

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class AppState { public _subject = new Subject(); public event = this._subject.asObservable(); public publish(data: any) { this._subject.next(data); } } 

y puedes publicar mensajes similares a eventos como este:

 export class AppComponent { constructor( public appState: AppState ) { appState.publish({data: 'some data'}); } } 

y puedes suscribirte a estos eventos:

 export class HomeComponent { constructor( public appState: AppState ) { appState.event.subscribe((data) => { console.log(data); // {data: 'some data'} }); } } 
  1. @Entrada y salida

    Si hay componentes de varias partes, puede usar @Input y @Output para intercambiar datos. Documento: https://angular.io/guide/component-interaction

    ejemplo: https://angular.io/generated/live-examples/component-interaction/eplnkr.html

  2. Inyección de dependencia

    puede almacenar los datos en el Servicio y luego inyectar el Servicio en el componente que desee. como “user.server.ts” en el ejemplo:

    https://angular.io/generated/live-examples/dependency-injection/eplnkr.html

Necesitará usar dependency injection. Aquí hay un pequeño ejemplo: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

Hay API de eventos en angular que puede hacerlo por ti.

Haga clic aquí para obtener más detalles sobre Eventos.

A continuación hay un ejemplo rápido que estoy usando actualmente en mi proyecto. Espero que ayude a alguien en necesidad.

import {Events} de ‘iónico-angular’;

Uso:

  constructor(public events: Events) { /*========================================================= = Keep this block in any component you want to receive event response to = ==========================================================*/ // Event Handlers events.subscribe('menu:opened', () => { // your action here console.log('menu:opened'); }); events.subscribe('menu:closed', () => { // your action here console.log('menu:closed'); }); } /*===================================================== = Call these on respective events - I used them for Menu open/Close = ======================================================*/ menuClosed() { // Event Invoke this.events.publish('menu:closed', ''); } menuOpened() { // Event Invoke this.events.publish('menu:opened', ''); } } 

La comunicación entre componentes se puede lograr en AngularJS. En AngularJS tenemos algo llamado como propiedad require que necesita ser mapeado en el componente. Siga el ejemplo a continuación que accederá a la función addPane (parámetro) del componente myTabs del componente myPane : –

Estructura del proyecto:

HTML

  1. index.html
  2. my-tabs.html
  3. my-pane.html

JS

  1. script.js

script.js

 angular.module('docsTabsExample', []) .component('myTabs', { transclude: true, controller: function MyTabsController() { var panes = this.panes = []; this.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; }; this.addPane = function(pane) { if (panes.length === 0) { this.select(pane); } panes.push(pane); }; }, templateUrl: 'my-tabs.html' }) .component('myPane', { transclude: true, require: { //This property will be used to map other component tabsCtrl: '^myTabs' // Add ^ symbol before the component name which you want to map. }, bindings: { title: '@' }, controller: function() { this.$onInit = function() { this.tabsCtrl.addPane(this); //Calling the function addPane from other component. console.log(this); }; }, templateUrl: 'my-pane.html' });