typescript 如何在 angular 5 中调用外部 javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47346559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call external javascript function in angular 5?
提问by Milan
I have downloaded a theme from thislink. I have to define script and CSS in index.html file.
我已经从这个链接下载了一个主题。我必须在 index.html 文件中定义脚本和 CSS。
index.html (body section)
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>
I have defind my function in common.js and call it from main.85741bff.js file.
我在 common.js 中定义了我的函数并从 main.85741bff.js 文件中调用它。
common.js (function)
common.js（函数）
document.addEventListener("DOMContentLoaded", function (event) {
masonryBuild();
navbarToggleSidebar();
navActivePage();
});
The issue is that I am able to call the function while page reloads but can't call the function while content load.
问题是我可以在页面重新加载时调用该函数，但在内容加载时无法调用该函数。
Can anyone help me to resolve this issue? Any help would be appreciated.
谁能帮我解决这个问题？任何帮助，将不胜感激。
回答by Akshay Garg
You can use javascript in the Angular application.
您可以在 Angular 应用程序中使用 javascript。
Step 1. Create demo.jsfile in assets/javascriptfolder.
步骤 1.在assets/javascript文件夹中创建demo.js文件。
export function test1(){
console.log('Calling test 1 function');
}
Step 2. Create demo.d.tsfile in assets/javascriptfolder.
步骤 2.在assets/javascript文件夹中创建demo.d.ts文件。
export declare function test1();
Step 3. Use it in your component
步骤 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());
}
}
Note: js and .d.ts file name should be same
注意：js 和 .d.ts 文件名应该相同
回答by VTodorov
You need to change the order in which you load your JavaSciprt files. Try loading common.jsbefore main......js. Your script tries to access a function from a file that hasn't been loaded yet. Try just switching those two lines of code:
您需要更改加载 JavaSciprt 文件的顺序。尝试加载common.js之前main......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>
回答by Songwon Park
In Angular4, 5 project folder, there is .angular-cli.json file.
在 Angular4, 5 项目文件夹中，有 .angular-cli.json 文件。
In file, you will see
在文件中，您将看到
"apps": [
{
"scripts": []
}
]
push your external js file path in the array.
在数组中推送您的外部 js 文件路径。
回答by Akshay Garg
You can call these methods by window object-
您可以通过窗口对象调用这些方法-
document.addEventListener("DOMContentLoaded", function (event) {
window['navbarToggleSidebar']();
window['navActivePage']();
});
