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

Question

我正在尝试从另一个组件执行功能(这 2 个组件不是兄弟)。我的猜测是，我将需要使用 @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，所以任何关于如何执行的想法函数 1 来自函数 2 ?

Answer 1

我同意您关于具有可观察对象的服务的想法是您在这里的最佳选择(正如其他人所建议的那样)——尽管在这种情况下我更喜欢 BehaviorSubject。这是一个简单的工作 plunkr，演示了如何实现它:

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

如果我们分解需求，您在这里需要的是一个仅传递事件的事件代理服务。这个 plunkr 还可以通过服务传递参数对象 - 如果您需要这样做 - 但如果不需要，则只需传递您想要的任何对象(或者只是从所有方法完全)。

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

为了快速引用，以下是重要的代码片段:

事件代理服务

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 + '"';
  }
}