如何在没有 @Output 装饰器的情况下使用 EventEmitter？答案

【问题标题】：How to use an EventEmitter without @Output decorator?如何在没有 @Output 装饰器的情况下使用 EventEmitter？
【发布时间】：2018-04-04 19:19:53
【问题描述】：

在 Angular 4 或 2 中，我想从组件向与组件无关的服务发出事件。

发出后会发生一个动作，并将在服务中处理。有人可以给我一个代码示例或任何替代解决方案吗？

注意：该服务并未导入该组件中，它不应调用该组件中的任何服务方法，但该服务可以调用该组件方法。

【问题讨论】：

请分享您的组件和服务代码。
订阅服务中的输出事件
@CornelC 能否提供示例代码
您的服务知道该组件吗？我认为你应该更新那个设计！

标签： angular angular2-services

【解决方案1】：

您可以在服务中订阅EventEmitter组件。

myComponent.myEvent.subscribe((data) => console.log(data));

【讨论】：

【解决方案2】：

您可以使用在组件中创建新主题并从服务订阅该主题。当您需要触发事件时，您可以调用 subject.next()。并且服务中的订阅也会更新。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestComponent } from './test.component';

import {AppService} from './app.service';


@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import { AppComponent } from './app.component';

@Injectable()
export class AppService {

    constructor() {
        AppComponent.getSubject().subscribe((response) => {
            this.doSomething(response);
        });
    }

    public doSomething(response): void {
        console.log('Event triggered', response);
    }
}

import { Component } from '@angular/core';

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private static subject = new Subject<string>();

  public static getSubject(): Observable<string> {
    return AppComponent.subject.asObservable();
  }

  public onClick(): void {
    AppComponent.subject.next('Test');
  }
}

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-test',
  template: `<div>test component</div>`
})
export class TestComponent {
 constructor(private appService: AppService) {
 }
}

【讨论】：

【解决方案3】：

正如上面的@Ric 评论，请仔细考虑为什么要从服务访问组件（反之亦然）。

如果您出于某种原因确实需要它并且不想触发事件，
在它们之间共享服务，并订阅更改。它类似于 angular 的示例，但在您的情况下，父级是服务而不是组件，因此所有其他方法都无效： https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

如果由于某种原因，这种方法不符合您的要求 - 你可以使用回调（注意：我个人不会使用这种方法）。

在此处查看示例： https://yakovfain.com/2016/10/31/angular-2-component-communication-with-events-vs-callbacks/

祝你好运！

【讨论】：