如何从独立的纯 JavaScript 函数调用 Angular 4 方法？

我希望能够将一些数据\传播事件从页面上的插件传递到我的 Angular 4 应用程序。

更具体地说，在我的例子中，数据\事件是在页面上 Angular 应用程序旁边的 Silverlight 插件应用程序内生成的。

我心中有以下解决方案：

• 创建一个从 Silverlight 调用的全局 JS 函数（因为这似乎是从 Silverlight 获取数据的最简单方法） 需要与 Angular 方面进行对话。
• 该函数依次调用一些传递数据的 Angular 类方法 从 Silverlight 收集。

作为一个说明（不包括 Silverlight 部分），我们可以有以下内容。

作为 Angular 端入口点的方法：

export class SomeAngularClass {
    public method(data: any): void {
        ...
    }
}

在 Angular 领域之外的某个地方，我们添加了一个全局纯 JavaScript 函数（由 Silverlight 调用）：

window.somePlainJsFunction = function (data) {
    // How to consume SomeAngularClass.method() from here?
}

问题是：我们如何从普通 JavaScript 函数调用 Angular 类方法？

正如 @Dumpen 所指出的，您可以使用 @HostListener 来获取从 Angular 外部的 javascript 分派的自定义事件。如果您还想发送参数，那么您可以通过将它们添加为来发送它们detail object.

在 JavaScript 中：

function dispatch(email, password) {
    var event = new CustomEvent('onLogin', {
        detail: {
            email: email,
            password: password
        }
    })
    window.dispatchEvent(event);
}

然后您可以在单击按钮时调用此方法。

现在要在 Angular 中侦听此调度事件，您可以在 Angular 组件中创建函数并向其添加 @HostListener，如下所示：

@HostListener('window:onLogin', ['$event.detail'])
onLogin(detail) {
    console.log('login', detail);
}

您可以将此代码添加到任何组件中。我已将其添加到我的根组件 - AppComponent