如何在 angular 5 中调用外部 javascript 函数? [英] How to call external javascript function in angular 5?

查看:29
本文介绍了如何在 angular 5 中调用外部 javascript 函数?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我从 this 下载了一个主题 链接.我必须在 index.html 文件中定义脚本和 CSS.

I have downloaded a theme from this link. I have to define script and CSS in index.html file.

index.html(正文部分)

index.html (body section)

<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 文件中调用它.

I have defind my function in common.js and call it from main.85741bff.js file.

common.js(函数)

common.js (function)

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.

推荐答案

您可以在 Angular 应用程序中使用 javascript.

You can use javascript in the Angular application.

步骤 1. 在 assets/javascript 文件夹中创建 demo.js 文件.

Step 1. Create demo.js file in assets/javascript folder.

export function test1(){
    console.log('Calling test 1 function');
}

步骤 2. 在 assets/javascript 文件夹中创建 demo.d.ts 文件.

Step 2. Create demo.d.ts file in assets/javascript folder.

export declare function test1();

步骤 3. 在你的组件中使用它

Step 3. Use it in your component

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文件名要一致

这篇关于如何在 angular 5 中调用外部 javascript 函数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆