如何从外部 javascript 文件中调用用 Angular 组件编写的函数？

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);
    }
  }