如何在没有 @Output 装饰器的情况下使用 EventEmitter?
How to use an EventEmitter without @Output decorator?
在 Angular 4 或 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) {
}
}
您可以订阅服务中的组件EventEmitter
。
myComponent.myEvent.subscribe((data) => console.log(data));
正如@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/
祝你好运!
在 Angular 4 或 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) {
}
}
您可以订阅服务中的组件EventEmitter
。
myComponent.myEvent.subscribe((data) => console.log(data));
正如@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/
祝你好运!