如何在 Angular 5 中调用外部 javascript 函数？
Posted
技术标签:
【中文标题】如何在 Angular 5 中调用外部 javascript 函数？【英文标题】：How to call external javascript function in angular 5? 【发布时间】：2018-04-30 23:44:19 【问题描述】：我从this 链接下载了一个主题。我必须在 index.html 文件中定义脚本和 CSS。
index.html（正文部分）
<body>
<app-root></app-root>
<script type="text/javascript" src="./assets/js/main.85741bff.js"></script>
<script type="text/javascript" src="./assets/js/common.js"></script>
</body>
我在 common.js 中定义了我的函数，并从 main.85741bff.js 文件中调用它。
common.js（函数）
document.addEventListener("DOMContentLoaded", function (event)
masonryBuild();
navbarToggleSidebar();
navActivePage();
);
问题是我可以在页面重新加载时调用该函数，但在内容加载时无法调用该函数。
谁能帮我解决这个问题？任何帮助将不胜感激。
【问题讨论】：
成功了吗？如果是，请回答，以下答案对我不起作用。 【参考方案1】：您可以在 Angular 应用程序中使用 javascript。
步骤 1. 在 assets/javascript 文件夹中创建 demo.js 文件。
export function test1()
console.log('Calling test 1 function');
步骤 2. 在 assets/javascript 文件夹中创建 demo.d.ts 文件。
export declare function test1();
第 3 步。在您的组件中使用它
import test1 from '../assets/javascript/demo';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
)
export class AppComponent
constructor()
console.log(test1());
注意：js和.d.ts文件名要一致
【讨论】：
@Ameya 不需要在 angular.json 或 .angular-cli.json 文件中导入 js 文件。第一次使用可以在 app.component.ts 中尝试，只需要注意 assets 文件夹的目录路径即可。此外，任何问题都可以在 stackblitz 上分享演示程序 它起作用了！！！，它起作用了 4 我，我的坏事并没有集中在进口上。删除我的旧评论 它对我不起作用，它返回一个错误说error TS2306: File '.../demo.d.ts' is not a module.我错过了什么吗？【参考方案2】：
您需要更改加载 JavaSciprt 文件的顺序。尝试在main......js 之前加载common.js。您的脚本尝试从尚未加载的文件中访问函数。尝试切换这两行代码：
<body>
<app-root></app-root>
<script type="text/javascript" src="./assets/js/common.js"></script>
<script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>
【讨论】：
我们能看到那些js文件的内容吗？
哪个js文件common.js或main.85741bff.js？
@Milan 他们俩
@Milan 您尝试调用的三个函数未在main.85.....js中定义
让我们continue this discussion in chat。【参考方案3】：
在Angular4, 5项目文件夹中，有.angular-cli.json文件。
在文件中，你会看到
"apps": [
"scripts": []
]
将你的外部js文件路径推入数组。
【讨论】：
是的，我之前尝试过，但是在加载内容时它不起作用。页面重新加载工作正常。想法？【参考方案4】：您可以通过窗口对象调用这些方法-
document.addEventListener("DOMContentLoaded", function (event)
window['navbarToggleSidebar']();
window['navActivePage']();
);
【讨论】：
它在页面重新加载时工作正常，但不适用于特定内容加载。想法？以上是关于如何在 Angular 5 中调用外部 javascript 函数？的主要内容，如果未能解决你的问题，请参考以下文章
在Angular外部使用js调用Angular控制器中提供的函数方法或变量