Question

我需要从外部js文件中调用一个函数到我的Angular组件中

我已经解决了相关问题

我的外部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);
    }
}

但是无法调用该方法。请协助我实现这一目标。

注意：所说的方法只是一个示例方法，我想用复杂的代码文件实现此逻辑。上面提到的问题是关于types.d.ts的，但是我不知道Angular项目中的types.d.ts在哪里。请简要介绍一下。如果上述问题提供了良好的解决方案，为什么我应该发布此问题。

角度结构（使用Angular CLI创建）

我不知道typings.d.ts在哪里，任何人都可以告诉我在哪里types.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();

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

3 个答案: