web-dev-qa-db-ja.com

Angularのコンポーネント間で通信する方法は？

私はWebアプリプロジェクトに取り組んでおり、Angularを使用しようとしていますが、コンポーネントの通信に問題があります。たとえば、親コンポーネントが子コンポーネントとデータを交換する方法、兄弟コンポーネント間で通信する方法など。

angularcomponents
24
吴桂林

親コンポーネントから子コンポーネントに通信しようとする場合、これは@InputおよびEventEmittersを使用して、angular docs。

Angular 2コンポーネントの相互作用

兄弟間のコミュニケーションについては、兄弟コンポーネント間でデータを共有する問題に役立つ可能性がある同様の質問に回答を投稿しました。現在、共有サービス方式が最も効率的だと思います。

angular-2-sibling-component-communication

17
Alex J

サービスの使用：

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

次のようなイベントのようなメッセージを公開できます。

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

これらのイベントにサブスクライブできます。

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

  1. @入出力

    マルチパートコンポーネントがある場合は、@ Inputおよび@Outputを使用してデータを交換できます。ドキュメント： https://angular.io/guide/component-interaction

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

  2. 依存性注入

    サービスにデータを保存してから、必要なコンポーネントにサービスを注入できます。例の「user.server.ts」など：

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

11
Zilong Wang

依存性注入を使用する必要があります。以下に小さな例を示します： https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

3
mhtsbt

コンポーネント間通信は、AngularJSで実現できます。 AngularJSには、コンポーネントにマッピングする必要があるrequireプロパティと呼ばれるものがあります。以下の例に従って、コンポーネントにアクセスしますaddPane（parameter）コンポーネントからmyTabsコンポーネントからmyPane：-

プロジェクト構造：

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>

コードスニペット： https://plnkr.co/edit/diQjxq7D0xXTqPunBWVE?p=preview

参照： https://docs.angularjs.org/guide/component#intercomponent-communication

お役に立てれば ：）

0
Sanket Ghorpade

EventsAPIがangularにあります。

イベントの詳細については、ここをクリックしてください。

以下は、私のプロジェクトで現在使用している簡単な例です。それが困っている人を助けることを願っています。

import {Events} from 'ionic-angular';

使用法 ：

  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