[英]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.