如何在Angular2中的路由器插座中发出事件
发布时间:2020-12-17 18:00:00 所属栏目:安全 来源:网络整理
导读:我有主要的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=
我有主要的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> 我想从另一个登录组件发出数据. <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模块中的提供程序. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 获取IP地址时出错:运行SSH命令出错了!命令
- Bootstrap是通过随机模拟扩充小样本的方法
- Angular4.x+Ionic3 踩坑之路之 Ionic3.x 界面传值
- Angualrjs和bootstrap相结合实现数据表格table
- bash – 是否有一个grep等同于find的-print0和xargs的-0开关
- angular – 从DOM元素获取ComponentRef
- vim有限行记忆
- twitter-bootstrap – Bootstrap 3在滚动时使用固定将导航栏
- appium框架之bootstrap
- “Angular 2.0 for TypeScript”(alpha)动画如何工作?