如何將 Javascript 導入 Angular2 中的全局命名空間

Question

這個問題已經在不同的版本中被反復問過，但我發現沒有一個解決方案適合我試圖解決的具體案例，所以請多多包涵。

我正在使用 Angular2。 我正在嘗試添加一系列 Javascript 文件，以便它們的內容可用於組件。 具體來說，我正在嘗試從 Wacom Signature SDK 導入 angular.js 演示文件。

有三個 Javascript 文件將一系列變量和函數扔到 globale 命名空間中。 例如

SigCaptX-Globals.js

var wgssSignatureSDK = null;  // Signature SDK object
var sigObj = null;            // Signature object
var sigCtl = null;            // Signature Control object
var dynCapt = null;           // Dynamic Capture object
var wizCtl = null;            // Wizard object
var scriptIsRunning = false;  // script run status
var pad = null                // created on script start, sets pad control data from class CPadCtl
var inputObj = null;  

我嘗試將文件添加到 angular.json 中的“腳本”定義中。 編譯有效，所以我認為它正在查找文件。 但我不知道如何制作它，以便我可以訪問這些文件中定義的 Billion 全局命名空間變量和函數。

請像我是個孩子一樣向我解釋； 我不聰明。

Answer 1

TLDR：

根據您的說明，您應該能夠直接從window object 訪問組件、管道、服務等中的變量，例如window.wgssSignatureSDK 。

長答案

您需要做的第一件事是將腳本添加到運行時。 由於您在scripts屬性中將文件添加到angular.json文件中，因此應在應用程序啟動時將 JS 文件下載到瀏覽器並包含在 HTML 中，從而有效地將其加載到運行時。

注意：當angular.json文件發生更改時，必須重新編譯應用程序。

現在，由於文件已經加載，從技術上講，您可以通過window全局 object 訪問變量，例如window.wgssSignatureSDK 。 下面是一個 JS 庫的示例。

// Your or any third party library
var YourLib = {
  // It can have variables, constants
  PI: Math.PI,

  // It can have complex objects
  person: {
    name: 'John Doe',
    address: {
      street: 'No name',
      number: 10
    }
  },

  // It can also have functions
  add: function(a, b) {
    return a + b;
  },

}

Note: See that, it is important that you scope your variables and functions, so they don't live directly into the window object, so instead of using like this window.wgssSignatureSDK , we would use it like this window.YourLib.wgssSignatureSDK . 這將有助於避免與其他現有庫的沖突以及未來對 window object 的添加。

但是，要實現它 Angular 的方式，我們應該避免直接訪問 DOM 和全局變量，為此，我們可以利用依賴注入機制。 創建一個文件以公開依賴注入機制要使用的tokens 。 每個庫應該至少有一個令牌。

你的令牌文件.ts

import { InjectionToken } from "@angular/core";

export const YourLibTokenOne = new InjectionToken('YOUR_LIB_1');
export const YourLibTokenTwo = new InjectionToken('YOUR_LIB_2');

app.module.ts

// At the top of the file
import { YourLibTokenOne, YourLibTokenTwo } from './your-tokens-file';

const YourLibOne = (window as any).YourLibOne;
const YourLibTwo = (window as any).YourLibTwo;

// The module definition
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    // In here we are provinding to the injectors a value for a specific token
    { provide: YourLibTokenOne, useValue: YourLibTokenOne },
    { provide: YourLibTokenTwo, useValue: YourLibTokenTwo }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

現在庫提供給依賴注入機制，我們現在只需將其注入到組件、服務、指令或任何 Angular class 機制中。

你的組件.ts

import { YourLibTokenOne } from './your-tokens-file';

@Component({ ... })
export class YourComponent {

  constructor(@Inject(YourLibTokenOne) public yourLibOne: any) {
    console.log(yourLibOne.PI);
    console.log(yourLibOne.add(10, 20));
  }

}

請像我是個孩子一樣向我解釋； 我不聰明。

沒有人知道一切，人生就是一場學習之旅，所以不要對自己太苛刻:)