Angular2 路由组件与父组件的交互
Angular2 routed component interaction with parent
请考虑我的应用程序的下图
EventsHub 是一个简单的可注入服务:
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class EventsHub {
private announcementSource = new Subject<string>();
messageAnnounced$ = this.announcementSource.asObservable();
announce( message : string) {
console.log('eventHub : firing...'+message);
this.announcementSource.next(message);
}
}
问题是当从 Funds、Clients 或 router-outlet 内的任何其他组件调用 'announce' 函数时,父级 (MainApp) 将不会收到任何消息。
另一方面,当我从 NavigationMenu 调用相同的服务函数时,MainApp 会很好地接收事件。
那么路由组件应该如何与其父组件交互?
谢谢
此案例已在 RC1 和 RC2 上进行测试
例如,您的 Funds
组件可以有一个 EventEmitter
@Output() someEvent: EventEmitter<SomeResult> = new EventEmitter<SomeResult>();
然后你的基金可以发出这个事件我的电话:
this.someEvent.emit({'Hello', 'from', 'the', 'other','side'});
确保您只在一个公共父级(根组件)上提供一次 EventsHub
。 DI 为每个提供者维护一个实例。如果你在每个使用它的组件上提供它,每个组件都会得到一个不同的实例。所以一个组件侦听一个实例,另一个组件在另一个实例上发出。
请考虑我的应用程序的下图
EventsHub 是一个简单的可注入服务:
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class EventsHub {
private announcementSource = new Subject<string>();
messageAnnounced$ = this.announcementSource.asObservable();
announce( message : string) {
console.log('eventHub : firing...'+message);
this.announcementSource.next(message);
}
}
问题是当从 Funds、Clients 或 router-outlet 内的任何其他组件调用 'announce' 函数时,父级 (MainApp) 将不会收到任何消息。
另一方面,当我从 NavigationMenu 调用相同的服务函数时,MainApp 会很好地接收事件。 那么路由组件应该如何与其父组件交互?
谢谢
此案例已在 RC1 和 RC2 上进行测试
例如,您的 Funds
组件可以有一个 EventEmitter
@Output() someEvent: EventEmitter<SomeResult> = new EventEmitter<SomeResult>();
然后你的基金可以发出这个事件我的电话:
this.someEvent.emit({'Hello', 'from', 'the', 'other','side'});
确保您只在一个公共父级(根组件)上提供一次 EventsHub
。 DI 为每个提供者维护一个实例。如果你在每个使用它的组件上提供它,每个组件都会得到一个不同的实例。所以一个组件侦听一个实例,另一个组件在另一个实例上发出。