gpt4 book ai didi

javascript - 如何在 Angular2 中订阅服务事件?

转载 作者:IT王子 更新时间:2023-10-29 02:43:57 26 4
gpt4 key购买 nike

我知道如何使用 EventEmitter 引发事件。如果我有这样的组件,我还可以附加一个要调用的方法:

<component-with-event (myevent)="mymethod($event)" />

当我有这样的组件时,一切都很好。我将一些逻辑移到了服务中,我需要从服务内部引发一个事件。我所做的是:

export class MyService {
myevent: EventEmitter = new EventEmitter();

someMethodThatWillRaiseEvent() {
this.myevent.next({data: 'fun'});
}
}

我有一个组件需要根据这个事件更新一些值,但我似乎无法让它工作。我试过的是这样的:

//Annotations...
export class MyComponent {
constructor(myService: MyService) {
//myService is injected properly and i already use methods/shared data on this.
myService.myevent.on(... // 'on' is not a method <-- not working
myService.myevent.subscribe(.. // subscribe is not a method <-- not working
}
}

当引发事件的服务不是组件时,如何让 MyComponent 订阅事件?

我在 2.0.0-alpha.28 上

编辑:将我的“工作示例”修改为实际工作,因此可以将重点放在不工作的部分;)

示例代码: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

最佳答案

更新:我发现使用 BehaviorSubject 或 Observable 而不是 EventEmitter 来解决此问题的更好/正确方法。请看这个答案:https://stackoverflow.com/a/35568924/215945

此外,Angular 文档现在有一个 cookbook example that uses a Subject .


原始/过时/错误答案:再次,don't use an EventEmitter in a service .这是一种反模式。

使用 beta.1... NavService 包含 EventEmiter。组件导航通过服务发出事件,组件 ObservingComponent 订阅事件。

导航服务.ts

import {EventEmitter} from 'angular2/core';
export class NavService {
navchange: EventEmitter<number> = new EventEmitter();
constructor() {}
emitNavChangeEvent(number) {
this.navchange.emit(number);
}
getNavChangeEmitter() {
return this.navchange;
}
}

组件.ts

import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';

@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number = 0;
subscription: any;
constructor(private navService:NavService) {}
ngOnInit() {
this.subscription = this.navService.getNavChangeEmitter()
.subscribe(item => this.selectedNavItem(item));
}
selectedNavItem(item: number) {
this.item = item;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}

@Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
<div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>
`,
})
export class Navigation {
item = 1;
constructor(private navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this.navService.emitNavChangeEvent(item);
}
}

Plunker

关于javascript - 如何在 Angular2 中订阅服务事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31131490/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com