如何在 Angular 5 中调用外部 javascript 函数？答案

【问题标题】：How to call external javascript function in angular 5?如何在 Angular 5 中调用外部 javascript 函数？
【发布时间】：2018-04-30 23:44:19
【问题描述】：

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

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

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

【问题讨论】：

成功了吗？如果是，请回答，以下答案对我不起作用。

标签： javascript angular typescript angular5

【解决方案1】：

您可以在 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文件名要一致

【讨论】：

@Ameya 不需要在 angular.json 或 .angular-cli.json 文件中导入 js 文件。第一次使用可以在 app.component.ts 中尝试，只需要注意 assets 文件夹的目录路径即可。此外，任何问题都可以在 stackblitz 上分享演示程序
它起作用了！！！，它起作用了 4 我，我的坏事并没有集中在进口上。删除我的旧评论
它对我不起作用，它返回一个错误说error TS2306: File '.../demo.d.ts' is not a module.我错过了什么吗？

【解决方案2】：

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

【讨论】：

我们能看到那些js文件的内容吗？
哪个js文件common.js或main.85741bff.js？
@Milan 他们俩
@Milan 您尝试调用的三个函数未在main.85.....js中定义
让我们continue this discussion in chat。

【解决方案3】：

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

在文件中，你会看到

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

将你的外部js文件路径推入数组。

【讨论】：

是的，我之前尝试过，但是在加载内容时它不起作用。页面重新加载工作正常。想法？

【解决方案4】：

您可以通过窗口对象调用这些方法-

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

【讨论】：

它在页面重新加载时工作正常，但不适用于特定内容加载。想法？