如何在angular5中调用外部javascript函数？

Question

我已经从 this link 下载了一个主题。我必须在 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();
});

问题是我可以在页面重新加载时调用该函数，但在内容加载时无法调用该函数。

谁能帮我解决这个问题？任何帮助将不胜感激。

Answer 1

您需要更改加载 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>

Answer 2

在Angular4,5项目文件夹中，有.angular-cli.json文件.

在文件中，您会看到

"apps": [
  {
    "scripts": []
  }
]

将您的外部 js 文件路径推送到数组中。

Answer 3

您可以在 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文件名应该相同

Answer 4

你可以通过window对象调用这些方法-

document.addEventListener("DOMContentLoaded", function (event) {
      window['navbarToggleSidebar']();
      window['navActivePage']();
 });

如何在angular5中调用外部javascript函数？

How to call external javascript function in angular 5?

javascript

typescript

angular

angular5