我有主要的appComponent
<div class="appComponent">
<div class="row nav navbar">
<div class="col-sm-8 text-left nav logo">Manacola</div>
<button class="col-sm-1 col-sm-offset-1 btn btn-primary openGraph" (click)="openGraph()">Graph</button>
<button class="col-sm-1 btn btn-primary openGraph" *ngIf="loggedIn" (click)="logout()">logout</button>
</div>
<router-outlet ></router-outlet>
我想从另一个登录组件发出数据.
关键是当我按下loginComponent中的“login”按钮时,我想在appComponent中* ngIf =“loggedIn”设置’true’.
有这样的工作会很好：
<router-outlet (isLogged) = 'loggedIn = $event' ></router-outlet>
解决方法
这是一个很棒的小实用程序服务,用于在angular2应用程序中代理事件.请注意,您实际上应该只使用这种类型的事件代理在分离的组件之间进行通信(例如父路由器和路由器出口的子代之间)
例：
....
import { EventBrokerService,IEventListener } "EventBrokerService";
@Component({
selector: "my-listening-component",template: `
<div *ngIf="indicator">I am On!</div>
<div *ngIf="!indicator">I am Off!</div>
`
})
@Injectable()
export class MyListeningComponent implements OnDestroy {
public indicator: boolean = false;
private _myEventListener: IEventListener;
constructor(private _eventBroker: EventBrokerService) {
this._myEventListener = _eventBroker.listen<boolean>("my-event",(value:boolean)=>{
this.indicator = value;
});
}
public ngOnDestroy() {
this._myEventListener.ignore();
}
}
@Component({
selector: "my-sending-component",template: `
<button (click)="canYouHearMe(true)>Turn me on</Button>
<button (click)="canYouHearMe(false)>Turn me off</Button>
`
})
@Injectable()
export class MySendingComponent {
constructor(private _eventBroker: EventBrokerService) {
}
public canYourHearMe(value:boolean) {
_eventBroker.emit<boolean>("my-event",value);
}
}
EventBrokerService.ts文件：
import { Injectable } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Subject } from 'rxjs/Subject';
interface IEventListener {
ignore() : void;
}
interface IBrokeredEventBase {
name:string;
emit( data: any ): void;
listen( next: (data: any) => void ): IEventListener;
}
interface IBrokeredEvent<T> extends IBrokeredEventBase {
emit( data: any ): void;
listen( next: (data: any) => void ): IEventListener;
}
class EventListener implements IEventListener {
constructor( private _subscription: Subscription ) {
}
public ignore() : void {
this._subscription.unsubscribe();
}
}
class BrokeredEvent<T> implements IBrokeredEvent<T> {
private _subject: Subject<T>;
constructor( public name: string ) {
this._subject = new Subject<T>();
}
public emit( data: T ): void {
this._subject.next(data);
}
public listen(next: (value: T) => void): IEventListener {
return new EventListener(this._subject.subscribe( next ));
}
}
@Injectable()
export class EventBrokerService {
private _events: { [name: string]: IBrokeredEventBase };
constructor() {
this._events = {};
}
public register<T>(eventName: string ) : BrokeredEvent<T> {
var event = this._events[eventName];
if ( typeof event === 'undefined' ) {
event = this._events[eventName] = new BrokeredEvent<T>(eventName);
}
return event as BrokeredEvent<T>;
}
public listen<T>(eventName: string,next: (value: T) => void) : IEventListener {
return this.register<T>(eventName).listen(next);
}
public emit<T>(eventName: string,data: T) : void {
return this.register<T>(eventName).emit(data);
}
}
不要忘记将eventBrokerService注册为angular2模块中的提供程序.
