Question

我有一个第三方聊天库，我将它导入到index.html中

<script type="text/javascript" src="/thirdPartyChatLibarary"></script>

该库以聊天开始，聊天结束等形式广播事件。

我在AngularJs-v1.6项目中捕获了与广播相同的事件

scope.$on('cobrowse.linkClicked', callFunction());

我需要在Angular-v7.0 +项目中捕获相同的事件。

我知道eventEmitter和@input属性，但是它们会将孩子与父母联系起来，在这里，我从第三方进行事件广播。

我不确定Observable中的rxjs是否会有所帮助。

在角度上是否有等效的$ on可以全局捕获这些事件？

Answer 1

我想分享一些我尝试过的方法。

首先让我们讨论一下我首先尝试过的在应用程序内广播和侦听事件的方法。

A）在应用程序内广播接收的事件

1）具有host的{{1}}属性，例如

@componet

2）与@HostListener

 @Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  host: {
    "(document:click)": "onDocumentClicked($event)"
  }
})
export class AppComponent {
  onDocumentClicked(ev) {
    console.log("clicked", ev);
  }
}

将功能和侦听器添加为

import { HostListener, Component } from "@angular/core";

3）@HostListener("document:click", ["$event"]) onDocumentClicked(ev) { console.log("clicked", ev); }中的Observables

创建服务为

rxjs

现在我们需要广播任何子组件中的事件

import { Injectable } from '@angular/core';
import { from, Subject } from 'rxjs';

@Injectable()
export class ListnerAndBroadcast {
    listeners: any;
    eventsSubject: any;
    events: any;

    constructor() {
        this.listeners = {};
        this.eventsSubject = new Subject();

        this.events = from(this.eventsSubject);

        this.events.subscribe(
            ({name, args}) => {
                if (this.listeners[name]) {
                    for (let listener of this.listeners[name]) {
                        listener(...args);
                    }
                }
            });
    }

    on(name, listener) {
        if (!this.listeners[name]) {
            this.listeners[name] = [];
        }

        this.listeners[name].push(listener);
    }

    off(name, listener) {
        this.listeners[name] = this.listeners[name].filter(x => x != listener);
    }

    broadcast(name, ...args) {
        this.eventsSubject.next({
            name,
            args
        });
    }
}

就我而言，我从最深的组件页脚广播了同样的内容。

并以root身份将其接收

this._ListnerAndBroadcast.broadcast('myCustomEvent', 'event');

我个人喜欢上面的方法，因为它可以动态处理并且可以处理任何事件流。

B）从第三方收到的事件或不在应用程序范围内的事件

我用过this._ListnerAndBroadcast.on('myCustomEvent', (event) => { console.log('myCustomEvent received '+ event); });

为

在子组件中添加为

Renderer2

现在我们需要广播事件。

因此，为了模仿第三方事件服务，请在浏览器控制台中运行以下代码

import { Component, Renderer2 } from '@angular/core';

renderer2.listen('document', 'myCustomEvent', (evt) => {
      console.log('getting it from renderer ', evt);
    })

您将能够在控制台中查看结果。

我正在使用angular 7+和rxjs 6.2

链接帮助我学习了上面整合的所有解决方案

Global Events and Event Delegation

Global event listener with observable

谢谢！

Answer 2

您可以使用RxJS提供的fromEvent运算符。 Check out an example here.这个运算符是不言自明的！它从事件创建一个Observable。

收听第三方图书馆广播的事件

2 个答案: