Angular 6中的广播事件/ Typescript
Angular 6中的广播事件/ Typescript
提问于 2018-06-11 08:41:24
我有以下结构：
<app>
<test-a></test-a>
<test-b></test-b>
</app>
@Component({
selector: 'app',
templateUrl: './app.component.html',
})
export class AppComponent {
}
@Component({
selector: 'test-a',
templateUrl: './testa.component.html',
})
export class TestAComponent {
}
@Component({
selector: 'test-b',
templateUrl: './testb.component.html',
})
export class TestBComponent {
}Test B 包含可选项目。当选择了一个项目时，我想告诉测试A该项目已被选中...
我认为我知道有两种选择可以实现这一点。
- 使用
App存储所选项目。在Test B中修改该选定项目，然后允许Test A做出反应...但是它使得Test A和Test B组件之间的紧密耦合变得丑陋……和父App组件。我不喜欢这个主意。 - 创建某种类型的“事件订阅者”服务，该服务存储可订阅的各种可观察对象的数组。我的当前实现(未完成)：
//我自己的类需要Model
export class KeyValuePair<T>
{
public key: string;
public value: T;
construct(key: string, value: T) {
this.key = key;
this.value = value;
}
}//我的实现可能是什么样子(wip)
import { Observable, of } from "rxjs";
import { KeyValuePair } from "../models/keyvaluepair";
import { Injectable } from "@angular/core";
@Injectable({
providedIn: 'root',
})
export class EventService<T>
{
protected subscriptions: KeyValuePair<Observable<T>>[];
public Broadcast(key: string, value: any)
{
var observable = new Observable<T>();
observable.subscribe((a) =>
{
return of(value);
});
this.subscriptions.push(
new KeyValuePair<Observable<T>>(
key,
observable
)
);
}
public Subscribe(key: string): Observable<T>
{
var observable = this.subscriptions.find((sub) => {
return sub.key == key;
});
return observable.value;
}
}//如何创建事件
this.testEventService.Broadcast("itemSelected", item);//如何使用
this.testEventService.Subscribe("itemSelected").subscribe((item) => {
this.changeItem(item);
});然而，我当然不应该写这些东西…？在angularjs和jquery中，有一种类似于$broadcast和$on的东西让生活变得如此简单……这里我漏掉了什么？在angular 6和typescript中有没有更简单的方法？
编辑：
我做了一个人们可以使用的服务，如果不好请告诉我：https://jsfiddle.net/jimmyt1988/oy7ud8L3/
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-11 08:53:54
您可以使用Subject
export class EventService<T> {
protected _eventSubject = new Subject();
public events = this._eventSubject.asObservable();
dispathEvent(event) {
this._eventSubject.next(event);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50789259
复制相关文章
相似问题