我试图在Angular中实现类似委托模式的东西.当用户点击a时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)
}
}
Run Code Online (Sandbox Code Playgroud)
这是观察组件:
export class ObservingComponent {
// How do I observe the event ?
// <----------Observe/Register Event ?-------->
public selectedNavItem(item: number) {
console.log('item index changed!');
}
}
Run Code Online (Sandbox Code Playgroud)
关键问题是,如何让观察组件观察相关事件?
event-delegation observable observer-pattern eventemitter angular
我已经读过,当引导应该让所有孩子共享相同的实例时注入,但我的主要和头部组件(主应用程序包括头部件和路由器出口)都获得了我的服务的单独实例.
我有一个FacebookService,用于调用facebook javascript api和一个使用FacebookService的UserService.这是我的引导程序:
bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);
Run Code Online (Sandbox Code Playgroud)
从我的日志记录看起来,引导调用结束,然后我看到FacebookService然后在每个构造函数运行的代码,MainAppComponent,HeaderComponent和DefaultComponent之前创建UserService:
我有两个组件A和B,其中组件A包含一个按钮.我希望当用户点击此按钮时,在组件B上触发一个功能
<A></A>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)
并且组件B使用routing进行渲染.我正在考虑使用具有可观察布尔值的服务,该服务指示是否单击了A中的按钮.这是实现它的正确方法吗?