他のコンポーネントのコンポーネント内の関数を呼び出す

Question

Angular2では、component1（左のパネルナビゲータとして使用）とcomponent2（これらの2つのコンポーネントは互いに兄弟、親、子など） 。 component2からcomponent1の関数を呼び出すにはどうすればよいですか？ ここではイベントバインドを使用できません。

Answer 1

共有サービスは、関連していないコンポーネント間の一般的な通信方法です。 コンポーネントにはuse a single instance of the serviceが必要です。ルートレベルで提供されていることを確認してください。

共有サービス：

@Injectable() 
export class SharedService { 

    componentOneFn: Function; 

    constructor() { } 
} 

コンポーネント1：

export class ComponentOne { 

    name: string = 'Component one'; 

    constructor(private sharedService: SharedService) { 
     this.sharedService.componentOneFn = this.sayHello; 
    } 

    sayHello(callerName: string): void { 
     console.log(`Hello from ${this.name}. ${callerName} just called me!`); 
    } 
} 

コンポーネント2：

export class ComponentTwo { 

    name: string = 'Component two'; 

    constructor(private sharedService: SharedService) { 
     if(this.sharedService.componentOneFn) { 
      this.sharedService.componentOneFn(this.name); 
      // => Hello from Component one. Component two just called me! 
     } 
    } 
} 

この投稿は、同様に役に立つかもしれません：Angular 2 Interaction between components using a service

Answer 2

関連のないコンポーネントと通信するために、角度BehaviorSubjectを使用できます。 abovを使用して

サービスファイル

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


@Injectable() 
export class commonService { 
    private data = new BehaviorSubject(''); 
    currentData = this.data.asObservable() 

    constructor() { } 

    updateMessage(item: any) { 
     this.data.next(item); 
    } 

} 

まずコンポーネント

constructor(private _data: commonService) { } 
shareData() { 
     this._data.updateMessage('pass this data'); 
} 

第二の成分

constructor(private _data: commonService) { } 
ngOnInit() { 
    this._data.currentData.subscribe(currentData => this.invokeMyMethode()) 
} 

メソッドを呼び出して、関連していないコンポーネントと簡単にデータを共有することができます。

More info here