Angular 从另一个组件调用组件中的函数

在Angular2中，假设我有component1（将其用作左面板导航器）和component2。这两个组件彼此不相关（同级、父级和子级…）。 如何从component2调用component1中的函数？

---

我不能在这里使用事件绑定。

共享服务是非相关组件之间的常用通信方式。 您的组件需要这样做，因此请确保它是在根级别提供的

共享服务：

@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 Behavior Subject与非相关组件进行通信

服务文件

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

第一个组件

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

使用上述方法，您可以轻松地调用方法/与非相关组件共享数据

---

您可能会使用管理连接。使用流量模式-服务是事件的分派器，组件是订阅者。组件之间并不真正了解彼此。这可能很有用：@ryannjohnson在component1中，我有插值{{total}}，需要立即更新并显示在左面板中。如果我只是调用服务，如何更新此变量？@pixelbits我将检查是否可以使用它？@SarahN Checkout@seidme下面的答案。将服务注入组件后，您可以直接在模板中引用其属性，即

{{{myservice.total}}

。这仍然有效吗2017年10月24日？完全按照指定的方式尝试，但从comp2调用时，comp1中的名称似乎未定义。