web-dev-qa-db-fra.com

Comment communiquer entre les composants en angulaire?

Je travaille sur un projet d'application Web et j'essaie d'utiliser Angular. La communication entre composants me pose problème. Par exemple, comment un composant parent échange des données avec un composant enfant, comment communiquer entre des composants frères et sœurs.

angularcomponents
23
吴桂林

Si vous essayez de communiquer d'un composant parent à un composant enfant, cela est assez clairement décrit à l'aide de @Input et EventEmitters avec @Output dans la documentation angulaire.

Interaction angulaire à 2 composants

En ce qui concerne la communication entre frères et soeurs, j'ai posté une réponse à une question similaire qui pourrait aider à résoudre le problème du partage de données entre composants de frères et soeurs. Actuellement, je pense que la méthode de service partagé est la plus efficace.

angular-2-frere-composant-communication

17
Alex J

Utilisation d'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 à des événements comme ceci:

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'}
    });
  }
}
11
Evan Lévesque

  1. @Input et @Output

    S'il existe des composants en plusieurs partiesvous 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 pouvez stocker les données dans Service, puis injecter Service dans le composant souhaité. tels que "user.server.ts" dans l'exemple:

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

10
Wang Steven

La communication entre composants peut être réalisée dans AngularJS. Dans AngularJS, nous avons une propriété appelée require qui doit être mappée dans le composant. Suivez l'exemple ci-dessous pour accéder à la fonction addPane (paramètre) du composant myTabs depuis le composant myPane: -

Structure du projet:

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>

Extrait de code: https://plnkr.co/edit/diQjxq7D0xXTqPunBWVE?p=preview

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

J'espère que cela t'aides :)

0
Sanket Ghorpade

Il y a Events API dans Angular qui peut le faire pour vous.

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

Vous trouverez ci-dessous un exemple rapide que j'utilise actuellement dans mon projet. J'espère que ça aide quelqu'un dans le besoin.

importer {Events} de 'ionic-angular';

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

  }
0
Sangwin Gawande