我正在做一个Angular CLI项目,在这个项目中我需要调用一些jQuery函数。
我已经在angular.json文件中包含了我的js:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/custom.js"
]
jQuery函数
function A() { alert('A'); }
function B() { alert('B'); }
我在需要调用以下jQuery函数的组件中导入了jQuery:
import * as $ from 'jquery';
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"allowJs": true,
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
现在,如何在我的组件中导入custom.js,以及如何调用这些函数A和B?
发布于 2018-05-30 22:13:48
如果你还没有安装jquery的类型,我推荐你这样做:
npm install --save @types/jquery
因此,您只需在组件/服务中导入jQuery (jquery
)即可使用它:
import 'jquery';
如果在编译或build
应用程序时遇到问题,可以通过在(<any> ...)
或(... as any)
中包装选择器来解决
// Use this
(<any> $('.myElement')).A();
// or this
($('.myElement') as any).A();
更新(请参阅注释)
要在页面就绪后执行代码,请尝试对主要组件(app-root
)实现AfterViewInit
:
import { Component, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
constructor(private someService: SomeService) { }
ngAfterViewInit() {
this.someService.someFunction();
}
}
https://stackoverflow.com/questions/50606429
复制相似问题