Angular中如何使用外部js的方法

Question

我需要从外部 js 文件调用 function 到我的 Angular 组件中

我已经通过相关问题 go

• 如何在 Angular 5 中导入外部 js 文件？
• 如何在Angular中包含外部js文件 4 并从angular调用function到js

我的外部 JS (external.js)

var radius = 25;

function calculateRadius(pi) {
    let piValue = 3.14159;

    if(pi) {
        piValue = pi;
    }

    var result = piValue * radius * radius;
    console.log('Result: ', result);
}

function wrapperMethod(pi) {
    console.log('Hi, this is from wrapper method');
    calculateRadius(pi)
}

我在脚本块下的 angular.json 添加了上述 JS 文件

"scripts": [
    "src/assets/external.js",
]

在 CircleComponent 中，我想调用方法

import wrapperMethod from '../../src/assets/external.js';

@Component({
  selector: 'app-circle',
  templateUrl: './circle.component.html',
  styleUrls: ['./circle.component.css']
})
export class CircleComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        wrapperMethod(3.14159);
    }
}

但它未能调用该方法。 请帮助我如何实现这一目标。

注意：上述方法只是一个示例方法，我想用复杂的代码文件来实现这个逻辑。 上述问题讲述了 typings.d.ts，但我不知道我的 Angular 项目中的 typings.d.ts 在哪里。 请介绍一下情况。 如果上述问题给出了很好的解决方法，我为什么要发布这个问题。

Angular 结构（使用 Angular CLI 创建）

我不知道typings.d.ts在哪里，谁能告诉我 typings.d.ts 在哪里 - 在上述问题中提到了How to include external js file in Angular 4 and call function from angular to js

Answer 1

您可以按照以下步骤操作

1) First add a reference of your external JS file for importing it to the component. 
   import * as wrapperMethods from '../../src/assets/external.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var wrapperMethods: any;

3) ngOninit(){
    wrapperMethods();
   }

Answer 2

将外部.js文件放在构建脚本中

如果仍然看不到它里面的方法放在index.html中

<script src="assets/PATH_TO_YOUR_JS_FILE"></script>

在导入后组件中

declare var FUNCTION_NAME: any;

ANY_FUNCTION() {
    FUNCTION_NAME(params);
}

Answer 3

不要与typings.d.ts混淆。 请遵循以下步骤。

1.将外部文件添加到assets文件夹中。 默认情况下，此文件的内容将根据您的angular-cli.json包含在内。

2.您将要使用的js函数必须exported 。 即

export function hello() {
    console.log('hi');
}

3.如下所示将文件导入组件。

 import * as ext from '../assets/some-external.js';

4.现在你可以像引用它了

ext.hello();

Answer 4

Steps:-
1. create a external js file. 
2. In component.ts use the below code.

ngOnInit() {  
  this.loadJsFile(JsFilePath);  
}  
public loadJsFile(url) {  
  let node = document.createElement('script');  
  node.src = url;  
  node.type = 'text/javascript';  
  document.getElementsByTagName('head')[0].appendChild(node);  
} 

3. If u use jquery then define selector in html to render. Or store data in variable.

4. 确保必须在 index.html 中添加 jquery cdn，并且必须从 npm 安装 Jquery 及其类型 package。