要在Angular中调用JavaScript文件的函数到TypeScript组件,你需要遵循以下步骤:
src/assets
文件夹中。angular.json
文件中的scripts
数组中添加JavaScript文件的路径。declare
关键字声明JavaScript文件中的函数。这样TypeScript编译器就知道这个函数的存在,而不会报错。假设你的JavaScript文件名为my-functions.js
,并且它包含一个名为myFunction
的函数。首先,将此文件放入src/assets
文件夹中,然后在angular.json
文件中的scripts
数组中添加以下路径:
"scripts": [
"src/assets/my-functions.js"
]
接下来,在你的TypeScript组件中,使用declare
关键字声明myFunction
函数,如下所示:
declare function myFunction(): void;
现在,你可以在TypeTypeScript组件中调用myFunction
函数了。例如:
import { Component, OnInit } from '@angular/core';
declare function myFunction(): void;
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor() { }
ngOnInit(): void {
myFunction();
}
}
请注意,为了确保在组件加载时调用JavaScript函数,我们在ngOnInit
生命周期钩子中调用了myFunction
。你也可以在其他适当的地方调用此函数,例如在事件处理程序中。
领取专属 10元无门槛券
手把手带您无忧上云