Question

我正在开发一个Angular CLI项目，我需要调用一些jQuery函数。

我已将我的js包含在 angular.json 文件中：

"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＆amp;乙

Answer 1

我建议你安装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();

更新（请参阅评论）

要在页面准备就绪后执行代码，请尝试对主要组件AfterViewInit实施app-root：

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();
  }
}

documentation for AfterViewInit

如何以角度调用外部jQuery函数

1 个答案: