[英]How to use methods from external js in Angular
I need to call a function from external js file into my Angular component我需要从外部 js 文件调用 function 到我的 Angular 组件中
I already go through the related question我已经通过相关问题 go
My External JS (external.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)
}
I added the said JS file in the angular.json under scripts block我在脚本块下的 angular.json 添加了上述 JS 文件
"scripts": [
"src/assets/external.js",
]
In the CircleComponent, I would like to call the method在 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);
}
}
But its failing to call the method.但它未能调用该方法。 Kindly assist me how to achieve this.请帮助我如何实现这一目标。
Note: The said methods as just an example methods, I want to implement this logic with the complex code file.注意:上述方法只是一个示例方法,我想用复杂的代码文件来实现这个逻辑。 The said question tells about typings.d.ts, but I don't know where is typings.d.ts in my Angular project.上述问题讲述了 typings.d.ts,但我不知道我的 Angular 项目中的 typings.d.ts 在哪里。 Kindly brief me regarding this.请介绍一下情况。 If the said question gives good solution means, why should I post this question.如果上述问题给出了很好的解决方法,我为什么要发布这个问题。
Angular Structure (Created using Angular CLI) Angular 结构(使用 Angular CLI 创建)
I don't know where is typings.d.ts
, could anyone please tell me where is typings.d.ts - which is mentioned in the said questions How to include external js file in Angular 4 and call function from angular to js我不知道typings.d.ts
在哪里,谁能告诉我 typings.d.ts 在哪里 - 在上述问题中提到了How to include external js file in Angular 4 and call function from angular to js
You can follow this below steps 您可以按照以下步骤操作
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();
}
put your external .js file under scripts in build 将外部.js文件放在构建脚本中
if still can not see methods inside it put in in index.html 如果仍然看不到它里面的方法放在index.html中
<script src="assets/PATH_TO_YOUR_JS_FILE"></script>
in your component after import section 在导入后组件中
declare var FUNCTION_NAME: any;
ANY_FUNCTION() {
FUNCTION_NAME(params);
}
Don't get confused with typings.d.ts
. 不要与typings.d.ts
混淆。 Follow below steps. 请遵循以下步骤。
1.Add your external file inside assets
folder. 1.将外部文件添加到assets
文件夹中。 The content of this file will be by default included as per your angular-cli.json
. 默认情况下,此文件的内容将根据您的angular-cli.json
包含在内。
2.The function of your js which you're going to use must be exported
. 2.您将要使用的js函数必须exported
。 ie 即
export function hello() {
console.log('hi');
}
3.Import your file inside your component as below. 3.如下所示将文件导入组件。
import * as ext from '../assets/some-external.js';
4.Now you can reference it like 4.现在你可以像引用它了
ext.hello();
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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.