如何在 Angular 5 中调用外部 JavaScript 函数？

Question

如何在 Angular 5 中调用外部 JavaScript 函数？

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（函数）

document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
     navbarToggleSidebar();
     navActivePage();
});

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

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

- Milan

1

有成功吗？如果是，请回答，下面的答案对我无效。 - Ameya

4个回答

0

你需要更改加载 JavaScript 文件的顺序。尝试在 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>

- VTodorov

我们能看到那些 js 文件的内容吗？ - VTodorov

常用的js文件是common.js还是main.85741bff.js？ - Milan

@Milan 他们两个都是。 - VTodorov

@Milan 你试图调用的三个函数在 main.85.....js 中没有定义。 - VTodorov

让我们在聊天中继续这个讨论。链接 - VTodorov

0

在 Angular4、5 项目文件夹中，有一个 .angular-cli.json 文件。

在该文件中，你将会看到：

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

把你的外部 JS 文件路径 push 到数组中。

- Songwon Park

是的，我以前尝试过，但在内容加载时它不起作用。重新加载页面时它可以正常工作。你有什么想法？ - Milan

-1

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

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

- Akshay Garg

页面重新加载时可以正常工作，但在特定内容加载时无法正常工作。有什么想法？ - Milan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akshay Garg · Accepted Answer

您可以在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();

步骤三. 在您的组件中使用它

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文件的文件名应该相同