[英]How to call external javascript function in angular 5?
我已经从这个链接下载了一个主题。 我必须在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（function）
document.addEventListener("DOMContentLoaded", function (event) {
masonryBuild();
navbarToggleSidebar();
navActivePage();
});
问题是我可以在页面重新加载时调用该函数，但在内容加载时无法调用该函数。
任何人都可以帮我解决这个问题吗？ 任何帮助，将不胜感激。
您可以在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文件名应该相同
您需要更改加载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>
在Angular4,5项目文件夹中，有.angular-cli.json文件。
在文件中，您将看到
"apps": [
{
"scripts": []
}
]
在数组中推送外部js文件路径。
你可以通过window object调用这些方法 -
document.addEventListener("DOMContentLoaded", function (event) {
window['navbarToggleSidebar']();
window['navActivePage']();
});
如何从外部javascript文件调用用Angular Component编写的函数？
[英]How to call function written in Angular Component from external javascript file?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.