如何從外部javascript文件調用用Angular Component編寫的函數？

Question

我編寫了一個用於在頁面上創建動態 UI 的外部 JavaScript 文件。 我需要在單擊動態創建的按鈕時調用在組件類中編寫的函數。 從技術上講，我試圖從純 JavaScript 文件調用函數。 任何幫助將不勝感激。

下面是一個例子：

假設我的 Home.Component.ts 文件有一個函數“showToast()”

export class HomeComponent {

    public showToast() {

        this.messageService.showToast();
    }
} //end of 'HomeComponent'

我的 custom.js 文件有一個用於查找點擊事件的代碼，如下所示：

btn.onClick() {

     //I want to call showToast() function from here.
}

Answer 1

• 創建一個 CND 包
• 在 index.html 中插入一個包作為腳本文件
• 使用服務文件

示例代碼：

import { Injectable } from '@angular/core';
declare var CryptoJS: any;
export class CryptService {

  constructor() { }

  public decrypt(encryptedString, random) {
    return new Promise((result, reject) => {
      const bytes = CryptoJS.AES.decrypt(encryptedString, random);
      result(bytes.toString(CryptoJS.enc.Utf8));
    });
  }

  public encrypt (payload, user_id) {
    return CryptoJS.AES.encrypt(payload, user_id).toString();
  }

}

模塊.ts

this.load('https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js');

  load(scriptUrl: string) {
    if (isPlatformBrowser(this.platformId)) {
      let node: any = document.createElement('script');
      node.src = scriptUrl;
      node.type = 'text/javascript';
      node.async = true;
      node.charset = 'utf-8';
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }