我编写了一个外部 JavaScript 文件,用于在页面上创建动态 UI。我需要在单击动态创建的按钮时调用在组件类中编写的函数。从技术上讲,我正在尝试从纯 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.
}
最佳答案
- 创建 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);
}
}
关于javascript - 如何从外部 javascript 文件调用 Angular 组件中编写的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59892492/