вызов функции в компоненте из другого компонента

Question

В Angular2 предположим, что у меня есть компонент1 (используйте его как навигатор слева) и component2. Эти два компонента не связаны друг с другом (родной, родительский и дочерний, ...) , Как я могу вызвать функцию в компоненте1 из компонента2? Я не могу использовать привязку события здесь.

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

Компонент два:

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