我试图在Angular中实现类似委托模式的东西。当用户点击nav-item时，我想调用一个函数然后发出一个事件，而该事件又由一些其他组件监听事件来处理。
这是场景：我有一个Navigation组件：
import {Component, Output, EventEmitter} from 'angular2/core';
@Component({
// other properties left out for brevity
events : ['navchange'],
template:`
<div class="nav-item" (click)="selectedNavItem(1)"></div>
`
})
export class Navigation {
@Output() navchange: EventEmitter<number> = new EventEmitter();
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this.navchange.emit(item)
}
}
这是观察组件：
export class ObservingComponent {
// How do I observe the event ?
// <----------Observe/Register Event ?-------->
public selectedNavItem(item: number) {
console.log('item index changed!');
}
}
关键问题是，如何让观察组件观察相关事件？
更新2016-06-27：使用其中之一，而不是使用Observables
Subject既是Observable（所以我们可以subscribe()）和Observer（所以我们可以在它上面调用next()来发出一个新值）。我们利用此功能。 Subject允许将值多播到许多观察者。我们不利用此功能（我们只有一个Observer）。
BehaviorSubject是Subject的变种。它具有“当前价值”的概念。我们利用这个：每当我们创建一个ObservingComponent时，它会自动从BehaviorSubject获取当前导航项值。
下面的代码和plunker使用BehaviorSubject。
ReplaySubject是Subject的另一种变体。如果要等到实际生成值，请使用ReplaySubject(1)。虽然BehaviorSubject需要一个初始值（将立即提供），但ReplaySubject却没有。 ReplaySubject将始终提供最新值，但由于它没有必需的初始值，因此服务可以在返回其第一个值之前执行一些异步操作。它仍会在具有最新值的后续呼叫中立即触发。如果您只想要一个值，请在订阅上使用first()。如果您使用first()，则无需取消订阅。
import {Injectable} from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable()
export class NavService {
// Observable navItem source
private _navItemSource = new BehaviorSubject<number>(0);
// Observable navItem stream
navItem$ = this._navItemSource.asObservable();
// service command
changeNav(number) {
this._navItemSource.next(number);
}
}
import {Component} from '@angular/core';
import {NavService} from './nav.service';
import {Subscription} from 'rxjs/Subscription';
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
subscription:Subscription;
constructor(private _navService:NavService) {}
ngOnInit() {
this.subscription = this._navService.navItem$
.subscribe(item => this.item = item)
}
ngOnDestroy() {
// prevent memory leak when component is destroyed
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.changeNav(item);
}
}
使用Observable的原始答案:(它需要比使用BehaviorSubject更多的代码和逻辑，所以我不推荐它，但它可能是有益的）
所以，这是一个使用Observable instead of an EventEmitter的实现。与我的EventEmitter实现不同，此实现还将当前选定的navItem存储在服务中，以便在创建观察组件时，它可以通过API调用navItem()检索当前值，然后通过navChange$ Observable通知更改。
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import {Observer} from 'rxjs/Observer';
export class NavService {
private _navItem = 0;
navChange$: Observable<number>;
private _observer: Observer;
constructor() {
this.navChange$ = new Observable(observer =>
this._observer = observer).share();
// share() allows multiple subscribers
}
changeNav(number) {
this._navItem = number;
this._observer.next(number);
}
navItem() {
return this._navItem;
}
}
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
subscription: any;
constructor(private _navService:NavService) {}
ngOnInit() {
this.item = this._navService.navItem();
this.subscription = this._navService.navChange$.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:number;
constructor(private _navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this._navService.changeNav(item);
}
}
另见Component Interaction Cookbook example，除了可观察量之外还使用Subject。虽然该示例是“父母和子女的交流”，但相同的技术适用于不相关的组件。
突发新闻：我添加了使用Observable而不是EventEmitter的another answer。我建议回答这个问题。实际上，在服务中使用EventEmitter是bad practice。
原答案:(不要这样做）
将EventEmitter放入服务中，允许ObservingComponent直接订阅（和取消订阅）事件 ：
import {EventEmitter} from 'angular2/core';
export class NavService {
navchange: EventEmitter<number> = new EventEmitter();
constructor() {}
emit(number) {
this.navchange.emit(number);
}
subscribe(component, callback) {
// set 'this' to component when callback is called
return this.navchange.subscribe(data => call.callback(component, data));
}
}
@Component({
selector: 'obs-comp',
template: 'obs component, index: {{index}}'
})
export class ObservingComponent {
item: number;
subscription: any;
constructor(private navService:NavService) {
this.subscription = this.navService.subscribe(this, this.selectedNavItem);
}
selectedNavItem(item: number) {
console.log('item index changed!', item);
this.item = item;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
@Component({
selector: 'my-nav',
template:`
<div class="nav-item" (click)="selectedNavItem(1)">item 1 (click me)</div>
`,
})
export class Navigation {
constructor(private navService:NavService) {}
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this.navService.emit(item);
}
}
如果你试试Plunker，我有一些不喜欢这种方法的东西：
subscribe()，以便在调用回调时设置正确的this更新：解决第二个问题的替代方案是让ObservingComponent直接订阅navchange EventEmitter属性：
constructor(private navService:NavService) {
this.subscription = this.navService.navchange.subscribe(data =>
this.selectedNavItem(data));
}
如果我们直接订阅，那么我们就不需要NavService上的subscribe()方法了。
为了使NavService稍微封装一些，你可以添加一个getNavChangeEmitter()方法并使用它：
getNavChangeEmitter() { return this.navchange; } // in NavService
constructor(private navService:NavService) { // in ObservingComponent
this.subscription = this.navService.getNavChangeEmitter().subscribe(data =>
this.selectedNavItem(data));
}
如果想要遵循更加反应式的编程风格，那么“Everything is a stream”的概念肯定会出现，因此，使用Observables尽可能频繁地处理这些流。
您可以如上所述使用BehaviourSubject，或者还有一种方法：
你可以像这样处理EventEmitter：首先添加一个选择器
import {Component, Output, EventEmitter} from 'angular2/core';
@Component({
// other properties left out for brevity
selector: 'app-nav-component', //declaring selector
template:`
<div class="nav-item" (click)="selectedNavItem(1)"></div>
`
})
export class Navigation {
@Output() navchange: EventEmitter<number> = new EventEmitter();
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this.navchange.emit(item)
}
}
现在您可以处理此事件，例如我们假设observer.component.html是Observer组件的视图
<app-nav-component (navchange)="recieveIdFromNav($event)"></app-nav-component>
然后在ObservingComponent.ts中
export class ObservingComponent {
//method to recieve the value from nav component
public recieveIdFromNav(id: number) {
console.log('here is the id sent from nav component ', id);
}
}
您需要在ObservingComponent的模板中使用Navigation组件（不要忘记向导航组件添加选择器..导航组件为ex）
<navigation-component (navchange)='onNavGhange($event)'></navigation-component>
并在ObservingComponent中实现onNavGhange（）
onNavGhange(event) {
console.log(event);
}
最后一件事......你不需要@Componennt中的events属性
events : ['navchange'],
你可以使用：
BehaviorSubject是一种主题，主体是一种特殊类型的observable，可以作为observable和observer，你可以像任何其他observable一样订阅消息，在订阅时，它返回source observable发出的主题的最后一个值：
优点：无需在组件之间传递数据等亲子关系等关系。
NAV服务
import {Injectable} from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable()
export class NavService {
private navSubject$ = new BehaviorSubject<number>(0);
constructor() { }
// Event New Item Clicked
navItemClicked(navItem: number) {
this.navSubject$.next(number);
}
// Allowing Observer component to subscribe emitted data only
getNavItemClicked$() {
return this.navSubject$.asObservable();
}
}
导航组件
@Component({
selector: 'navbar-list',
template:`
<ul>
<li><a (click)="navItemClicked(1)">Item-1 Clicked</a></li>
<li><a (click)="navItemClicked(2)">Item-2 Clicked</a></li>
<li><a (click)="navItemClicked(3)">Item-3 Clicked</a></li>
<li><a (click)="navItemClicked(4)">Item-4 Clicked</a></li>
</ul>
})
export class Navigation {
constructor(private navService:NavService) {}
navItemClicked(item: number) {
this.navService.navItemClicked(item);
}
}
观察组件
@Component({
selector: 'obs-comp',
template: `obs component, item: {{item}}`
})
export class ObservingComponent {
item: number;
itemClickedSubcription:any
constructor(private navService:NavService) {}
ngOnInit() {
this.itemClickedSubcription = this.navService
.getNavItemClicked$
.subscribe(
item => this.selectedNavItem(item)
);
}
selectedNavItem(item: number) {
this.item = item;
}
ngOnDestroy() {
this.itemClickedSubcription.unsubscribe();
}
}
第二种方法是Event Delegation in upward direction child -> parent
例如由@Ashish Sharma回答。
我发现了这种情况的另一种解决方案，而没有使用Reactivex这两种服务。我实际上喜欢rxjx API，但我认为在解析异步和/或复杂函数时它是最好的。以这种方式使用它，它对我来说非常重要。
我认为你正在寻找的是广播。只是。我发现了这个解决方案：
<app>
<app-nav (selectedTab)="onSelectedTab($event)"></app-nav>
// This component bellow wants to know when a tab is selected
// broadcast here is a property of app component
<app-interested [broadcast]="broadcast"></app-interested>
</app>
@Component class App {
broadcast: EventEmitter<tab>;
constructor() {
this.broadcast = new EventEmitter<tab>();
}
onSelectedTab(tab) {
this.broadcast.emit(tab)
}
}
@Component class AppInterestedComponent implements OnInit {
broadcast: EventEmitter<Tab>();
doSomethingWhenTab(tab){
...
}
ngOnInit() {
this.broadcast.subscribe((tab) => this.doSomethingWhenTab(tab))
}
}