Comment communiquer entre les composants en angle?

si vous essayez de communiquer d'un composant parent à un composant enfant, Ceci est assez clairement décrit en utilisant @Input et EventEmitters avec @Output dans les docs angulaires.

interaction des composants angulaires 2

pour ce qui est de la communication entre frères et sœurs, j'ai publié une réponse à une question similaire qui pourrait aider à la question du partage de données entre les composantes des frères et sœurs. Actuellement, je pense que le service partagé la méthode la plus efficace.

angulaires-2-sœur-composant-communication

utilisant un service:

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);
  }
}

et vous pouvez publier des messages semblables à ceux-ci:

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

et vous pouvez vous abonner à ces événements:

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

1. @entrées et sorties

   S'il y a des composants à plusieurs composants vous pouvez utiliser @Input et @Output pour échanger des données. Document: https://angular.io/guide/component-interaction

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

2. Injection De Dépendance

   vous peut stocker les données en Service, puis injecter le Service dans le composant que vous voulez. comme "utilisateur.serveur.ts" dans l'exemple:

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

, Vous devrez utiliser l'injection de dépendance. Voici un petit exemple: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

il y a Events API en angle qui peut le faire pour vous.

Cliquez ici pour plus de détails sur les événements.

ci-dessous est un exemple rapide que je suis en train d'utiliser dans mon projet. Espérons que cela aide quelqu'un dans le besoin.

importer { Événements } à partir de "ionique-angulaire';

Utilisation :

  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 communication entre composants peut être réalisée à AngularJS. En AngularJS nous avons quelque chose appelé comme exiger propriété qui doit être cartographiée dans le composant. Suivez l'exemple ci-dessous pour accéder à la fonction addPane (paramètre) du composant myTabs du composant myPane : -

structure du projet:

HTML

1. de l'index.html
2. mon-tabs.html
3. mon volet.html

JS

"1519190920 de script".js

"151950920 de 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'
    });

de l'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>

mon-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>

mon volet.html

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

extrait de Code: https://plnkr.co/edit/diQjxq7D0xXTqPunBWVE?p=preview

référence: https://docs.angularjs.org/guide/component#intercomponent-communication

Hope cela aide :)