私はWebアプリプロジェクトに取り組んでおり、Angularを使用しようとしていますが、コンポーネントの通信に問題があります。たとえば、親コンポーネントが子コンポーネントとデータを交換する方法、兄弟コンポーネント間で通信する方法など。
親コンポーネントから子コンポーネントに通信しようとする場合、これは@InputおよびEventEmittersを使用して、angular docs。
兄弟間のコミュニケーションについては、兄弟コンポーネント間でデータを共有する問題に役立つ可能性がある同様の質問に回答を投稿しました。現在、共有サービス方式が最も効率的だと思います。
サービスの使用:
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'}
});
}
}
@入出力
マルチパートコンポーネントがある場合は、@ Inputおよび@Outputを使用してデータを交換できます。ドキュメント: https://angular.io/guide/component-interaction
例: https://angular.io/generated/live-examples/component-interaction/eplnkr.html
依存性注入
サービスにデータを保存してから、必要なコンポーネントにサービスを注入できます。例の「user.server.ts」など:
https://angular.io/generated/live-examples/dependency-injection/eplnkr.html
依存性注入を使用する必要があります。以下に小さな例を示します: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js
コンポーネント間通信は、AngularJSで実現できます。 AngularJSには、コンポーネントにマッピングする必要があるrequireプロパティと呼ばれるものがあります。以下の例に従って、コンポーネントにアクセスしますaddPane(parameter)コンポーネントからmyTabsコンポーネントからmyPane:-
プロジェクト構造:
HTML
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
お役に立てれば :)
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', '');
}
}