다른 구성 요소의 구성 요소에서 함수를 호출합니다.

Question

Angular2에서 component1 (왼쪽 패널 탐색기로 사용)과 component2.이 두 구성 요소는 서로 관련이 없습니다 (형제, 부모 및 자식 ...) . 어떻게 component2에서 component1의 함수를 호출 할 수 있습니까? 여기서 이벤트 바인딩을 사용할 수 없습니다.

Answer 1

공유 서비스는 비 관련 구성 요소 간의 일반적인 통신 방법입니다. 구성 요소는 use a single instance of the service이어야하므로 루트 수준에서 제공되는지 확인하십시오.

공유 서비스 :

@Injectable() 
export class SharedService { 

    componentOneFn: Function; 

    constructor() { } 
} 

구성 요소 하나를

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를 사용할 수 있습니다.

서비스 파일

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

abov를 사용하여 e 접근 방식을 사용하면 비 관련 구성 요소를 사용하여 데이터를 쉽게 공유하고 메서드를 호출 할 수 있습니다.

More info here