如何從獨立的純 JavaScript 函數調用 Angular 4 方法？

Question

我希望能夠將一些數據\\傳播事件從頁面上的插件傳遞到我的 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 類方法？

Answer 1

正如@Dumpen 所指出的，您可以使用@HostListener 來獲取從 Angular 之外的 javascript 調度的自定義事件。 如果您還想發送參數，則可以通過將它們添加為詳細信息對象來發送它們。

在 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

Answer 2

您可以使用事件，這樣您就可以讓 JavaScript 發送您在服務中偵聽的事件。

CustomEvent是一項新功能，因此您可能需要對其進行 polyfill： https : //developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

JavaScript：

var event = new CustomEvent("CallAngularService");

window.dispatchEvent(event);

角度：

@HostListener("window:CallAngularService")
onCallAngularService() {
  // Run your service call here
}

Answer 3

我認為這就是您正在尋找的外角服務

您可以在 Angular 之外創建函數/類，並在 angular 中提供一個值。 通過這種方式，您可以同時處理有角和無角的東西：

class SomePlainClass {
  ...
}
window.somePlainJsFunction = new SomePlainClass();

@NgModule({
  providers: [{provide: SomePlainClass, useValue: window.somePlainJsFunction}],
  ...
})
class AppModule1 {}

@NgModule({
  providers: [{provide: SomePlainClass, useValue: window.somePlainJsFunction}],
  ...
})
class AppModule2 {}

class MyComponent {
  constructor(private zone:NgZone, private SomePlainClass:SharedService) {
    SomePlainClass.someObservable.subscribe(data => this.zone.run(() => {
      // event handler code here
    }));
  }
}

Answer 4

應該采取的方式取決於特定情況，尤其是優先級。

如果在 Angular 應用程序之前初始化 Silverlight 應用程序，並且在完成 Angular 應用程序初始化之前調用window.somePlainJsFunction ，這將導致競爭條件。 即使有一種可接受的方式從外部獲取 Angular 提供程序實例，該實例在somePlainJsFunction調用期間也不存在。

如果在Angular 引導程序之后調用window.somePlainJsFunction回調，則應在Angular 應用程序內部分配window.somePlainJsFunction ，其中SomeAngularClass提供程序實例可訪問：

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

如果在Angular 引導程序之前調用window.somePlainJsFunction回調，它應該為 Angular 應用程序提供全局數據以獲取：

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

然后window.angularGlobalData可以在 Angular 中直接使用或作為提供者使用。

工作示例