Question

我正在尝试学习Angular，作为学习的一部分，我需要向我的一个组件中添加一些JS逻辑，该逻辑已经在单独的JS文件中。有一个非常相似的问题（How to add custom js file to angular component like css file）的答案。我按照它的建议做了，但似乎缺少了一些东西。请帮助我理解，我做错了什么？

我创建了文件custom.js并将其保存在src/assets文件夹中（只是尝试查看将起作用的声明，因为我看到了几种不同的样式）：

(function customTestHello1() {
    console.log("customTestHello1: Hello!!!"); 
    alert('customTestHello1: Hello!!!');
})()

function customTestHello2() {
    console.log("customTestHell2: Hello!!!"); 
    alert('customTestHell2: Hello!!!');
}

我将此文件包含在angular.json中：

“脚本”：[ “ src / assets / custom.js” ]

我在组件的ts-file中添加了

declare const customTestHello1: any;
declare const customTestHello2: any;

并在组件的ngOnInit函数中添加了对这些函数的调用

  ngOnInit(): void {
    customTestHello1();
    //customTestHello2();
  }

打开页面时，我在控制台中看到错误：

ERROR ReferenceError: customTestHello1 is not defined
    at MyComponent.ngOnInit (my.component.ts:20)
    at callHook (core.js:3038)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7186)
    at refreshEmbeddedViews (core.js:8279)
    at refreshView (core.js:7195)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
    at refreshView (core.js:7221)

即使我取消注释“ customTestHello2（）”，结果也是一样。

我做错了什么？如何将JS嵌入Angular项目的组件中？

如果我在脚本中添加以下内容：

window.initMethod = function() { console.log("customInitMethod: Hello!"); }

将其添加到myComponent.ts：

let initMethod: any;

并调用它：

ngOnInit(): void {
    initMethod();
    //customTestHello1();
    //customTestHello2();
  }

我收到另一个错误：

core.js：4197错误TypeError：initMethod不是函数在MyComponent.ngOnInit（pingball.component.ts：21）在callHook（core.js：3038）在callHooks（core.js：3008）在executeInitAndCheckHooks（core.js：2960）在refreshView（core.js：7186）在refreshEmbeddedViews（core.js：8279）在refreshView（core.js：7195）在refreshComponent（core.js：8325）在refreshChildComponents（core.js：6964）在refreshView（core.js：7221）

请告知！

非常感谢！

P.S。如果您提供一个很好的教程，并且没有过时的示例，那么我也将受益匪浅。

Answer 1

将custom.js文件导入要使用的组件中。

Answer 2

在将相应服务导入相应组件后，创建一个角度服务以在您的组件中调用customTestHello1()方法。确保在module.ts的provider数组中添加服务。有关服务创建的详细信息，请参阅：https://angular.io/tutorial/toh-pt4

如何将自定义JS文件添加到Angular组件

2 个答案: