Question

我从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（function）

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

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

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

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

Answer 2

您需要更改加载JavaSciprt文件的顺序。尝试在common.js之前加载main......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 3

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

在档案中，您会看到

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

在数组中推送外部js文件路径。

Answer 4

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

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

如何在角度5中调用外部javascript函数？

4 个答案: