如何从独立的纯JavaScript函数调用Angular 4方法？ [英] How to call an Angular 4 method from a standalone plain JavaScript function?

问题描述

我希望能够将页面上插件中的一些data \ propagate事件传递给我的Angular 4应用程序。

I'd like to be able to pass some data\propagate events from a plugin on the page to my Angular 4 app.

更具体地说，在我的case data \events是在Silverlight插件应用程序内部生成的，该应用程序位于页面上的Angular应用程序旁边。

More specifically, in my case data\events are generated inside a Silverlight plugin app that is next to the Angular app on the page.

我脑子里有以下解决方案：

I have the following solution in my mind:

• 创建一个全局JS函数，从Silverlight调用（因为这似乎是从Silverlight获取数据的最简单方法）
  需要与Angular方面交流。


• 该函数反过来调用一些Angular类方法传递从Silverlight收集的数据
  。

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

As an illustration to that (excluding the Silverlight part), we could have the following.

一种方法作为Angular方面的入口点：

A method as an entry point on the Angular side:

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

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

And somewhere outside the Angular realm, we add a global plain JavaScript function (to be called by Silverlight):

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

问题是：我们如何从中调用Angular类方法一个简单的JavaScript函数？

推荐答案

它应该做的方式取决于具体情况，尤其是优先级。

The way it should be done depends on particular case, especially on the precedence.

如果在Angular应用程序之前初始化Silverlight应用程序，并且在完成Angular应用程序初始化之前调用 window.somePlainJsFunction ，会导致比赛状况。即使有一种可接受的方式从外部获取Angular提供程序实例，在 somePlainJsFunction 调用期间该实例也不会存在。

If Silverlight aplication is initialized before Angular application, and window.somePlainJsFunction is called before finishing Angular application initialization, this will result in race condition. Even if there was an acceptable way to get Angular provider instance externally, the instance wouldn't exist during somePlainJsFunction call.

如果 window.somePlainJsFunction 回调在 Angular bootstrap之后调用， window.somePlainJsFunction 应该被分配内部 Angular应用程序，其中 SomeAngularClass 提供者实例可以访问：

If window.somePlainJsFunction callback is called after Angular bootstrap, window.somePlainJsFunction should be assigned inside Angular application, where SomeAngularClass provider instance is reachable:

window.somePlainJsFunction = function (data) {
    SomeAngularClass.method();
}

如果 window.somePlainJsFunction 回调在 Angular bootstrap之前被称为，它应该为Angular应用程序提供全局数据：

If window.somePlainJsFunction callback is called before Angular bootstrap, it should provide global data for Angular application to pick up:

window.somePlainJsFunction = function (data) {
    window.angularGlobalData = data;
}

然后 window.angularGlobalData 可以在Angular中直接使用，也可以作为提供者使用。

Then window.angularGlobalData can be used inside Angular, either directly or as a provider.

工作示例

这篇关于如何从独立的纯JavaScript函数调用Angular 4方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！