如何从不是第一个组件的同级组件的另一个组件执行函数？

Question

我正在尝试从另一个组件执行一个函数（这两个组件不是兄弟组件）。我的猜测是，我需要使用@Output 和 eventEmitter来完成此任务，或者创建一个Service并订阅Observable以在所有组件中共享相同的数据（我知道如何传递消息（字符串），但我不知道）知道如何执行函数）。我不太确定从哪里开始。我正在尝试从function2执行function1。谁能帮助我如何让它发挥作用？请提供一个plunker。这就是我的项目的样子：

   src
   |__app(FOLDER)
      |__home(FOLDER)
      |     |
      |     |__home.component.ts 
      |                  |______function2(){
      |                          What do I need to put in here to execute function1?
      |                          }
      | 
      |__products(FOLDER) 
           |
           |__tools(FOLDER)
                  |
                  |____tools.component.ts
                                   |____function1(){
                                         alert("I'm inside function 1!!");
                                         }

正如您所看到的，我有一个包含 function2 的文件home.component.ts和一个包含 function1 的文件tools.component.ts ，那么有什么想法如何从 function2 执行 function1 吗？

Answer 1

我同意您关于可观察服务的想法是您的最佳选择（正如其他人所建议的那样） - 尽管BehaviorSubject在这种情况下我更喜欢 a 。这是一个简单、有效的 plunkr，演示了如何实现这一点：

https://plnkr.co/edit/quHc2yOkxXIbXYUlnZbB?p=preview

如果我们分解需求，您需要的是一个仅传递事件的事件代理服务。这个 plunkr 还能够通过服务传递参数对象 - 如果您需要这样做 - 但如果不需要，则只需传递您想要的任何对象（或者只是param从所有方法中完全删除参数）。

此实现并不关心组件是否是同级组件 - 因为我们正在使用服务。无论您的应用程序的结构如何，两者都将提供相同的服务实例。

为了快速参考，以下是重要的代码片段：

事件代理服务

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

@Injectable()
export class EventProxyService {

 private eventSubject = new BehaviorSubject<any>(undefined);

 triggerSomeEvent(param: any) {
     this.eventSubject.next(param);
 }

 getEventSubject(): BehaviorSubject<any> {
    return this.eventSubject;
 }
}

第一个组件

import { Component, OnInit } from '@angular/core';
import { EventProxyService } from './event-proxy.service';

@Component({
  selector: 'app-first',
  templateUrl: './src/first.component.html'
})
export class FirstComponent implements OnInit {
  displayText = 'I havent created any events yet.';
  constructor(private eventProxyService: EventProxyService) { }

  ngOnInit() { }

  triggerAnEvent() {
    this.eventProxyService.triggerSomeEvent(Date());
    this.displayText = 'I fired an event.'
  }
}

第二个组件

import { Component, OnInit } from '@angular/core';
import { EventProxyService } from './event-proxy.service';

@Component({
  selector: 'app-second',
  templateUrl: './src/second.component.html'
})
export class SecondComponent implements OnInit {

  displayText = 'I havent got an event yet';
  constructor(private eventProxyService: EventProxyService) { }

  ngOnInit() {
    this.eventProxyService.getEventSubject().subscribe((param: any) => {
      if (param !== undefined) {
        this.theTargetMethod(param);
      }
      });
  }

  theTargetMethod(param) {
    this.displayText = 'Target Method got called with parameter: "' + param + '"';
  }
}