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

时间:2017-02-23 00:42:37

标签: angular events event-handling components listener

在Angular2中,假设我有component1(使用它作为左面板导航器)和component2。这两个组件彼此不相关(兄弟,父和子,......)。 如何从component2调用component1中的函数? 我不能在这里使用事件绑定。

2 个答案:

答案 0 :(得分:3)

共享服务是非相关组件之间通信的常用方式。 您的组件需要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

答案 1 :(得分: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())
}

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

Tkinter module not found on Ubuntu