navigationend - ¿Cómo comunicarse entre componentes en Angular?

title angular 6

Question

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 primario intercambia datos con el componente secundario, cómo comunicarse entre los componentes hermanos.

Answer 1

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

Answer 2

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

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

A continuación se muestra un ejemplo rápido que estoy usando actualmente en mi proyecto. Espero que ayude a alguien que lo necesite.

importar {Eventos} desde ''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'', '''');
    }

  }

Answer 3

La comunicación entre componentes se puede lograr en AngularJS. En AngularJS tenemos algo llamado propiedad require que necesita ser mapeado en el componente. Siga el siguiente ejemplo que accederá a la función addPane (parámetro) del componente myTabs desde el 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''
    });

index.html

<my-tabs>
  <my-pane title="Hello">
    <h4>Hello</h4>
    <p>Lorem ipsum dolor sit amet</p>
  </my-pane>
  <my-pane title="World">
    <h4>World</h4>
    <em>Mauris elementum elementum enim at suscipit.</em>
    <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
  </my-pane>
</my-tabs>

my-tabs.html

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="$ctrl.select(pane)">{{pane.title}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>

my-pane.html

<div class="tab-pane" ng-show="$ctrl.selected" ng-transclude></div>

Fragmento de código: https://plnkr.co/edit/diQjxq7D0xXTqPunBWVE?p=preview

Referencia: https://docs.angularjs.org/guide/component#intercomponent-communication

Espero que esto ayude :)

Answer 4

Necesitará usar la inyección de dependencia. Aquí hay un pequeño ejemplo: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

Answer 5

Si está intentando comunicarse desde un componente primario a un componente secundario, esto se describe con bastante claridad 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 tema de compartir datos entre componentes hermanos. Actualmente, creo que el método de servicio compartido es el más eficiente.

angular-2-sibling-component-communication

Answer 6

Usando un servicio:

import { Injectable } from ''@angular/core'';
import { Subject }    from ''rxjs/Subject'';

@Injectable()
export class AppState {
  public _subject = new Subject<object>();
  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''}
    });
  }
}