Как вызвать внешние функции jQuery в угловых

Question

Я работаю над Angular CLI Project, где мне нужно вызвать некоторые функции 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 & B?

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

документация для AfterViewInit