Question

在app.component.html

中

<li routerLinkActive="active current">
       <a  [routerLink]="['/stats']">
                    Cluster stats
       </a>
   </li>

由于我们正在路由到DisplayAllStatsComponent，如何监听上面li或标签中触发的'viewdetails'事件？在app.module.ts

{ 
    path:'/stats', 
    component : DisplayAllStatsComponent
 }

在DisplayAllStatsComponent中单击组件时会触发事件

@Output（'viewdetails'）viewdetails = new EventEmitter（）;

//这里调用函数。

  callViewDetails(name,alias){
    let ev = {
      name:name,alias:alias
    };
    this.viewdetails.emit(ev); // here value is being emitted.
  }

现在我需要在app.component.html

中发出的值

Answer 1

EventEmitter可用于在父组件和子组件之间进行通信。在你的情况下，它将无法正常工作。但是，有一种方法可以使用Subject “广播”事件。

您可以创建一个Broadcaster类，如下所示：

import { Subject } from "rxjs/Subject";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";

export class Broadcaster {
  private _event: Subject<BroadcastEvent>;

  constructor() {
    this._event = new Subject<BroadcastEvent>();
  }

  broadcast$(key: any, data?: any) {
    this._event.next({key, data});
  }

  on$<T>(key: any): Observable<T> {
    return this._event.asObservable()
      .filter(event => event.key === key)
      .map(event => <T>event.data);
  }
}

export interface BroadcastEvent {
  key: any;
  data?: any;
}

然后，您可以像这样广播事件：

callViewDetails(name,alias){
    let ev = {
      name:name,alias:alias
    };
    this.broadcaster.broadcast$("viewDetailsEvent", ev); //Broadcast
  }

订阅您应用组件中的活动：

this.broadcaster.on$("viewDetailsEvent").subscribe(viewDetails => {
  //do whatever you want with the viewDetails here
})

如何在Angular 4中使用路由加载的组件中侦听自定义事件？

1 个答案: