Comment appeler une fonction jQuery externe en mode angular

Je travaille sur un projet CLI angular où je dois appeler des fonctions jQuery.

J’ai inclus mon js dans le fichier angular.json :

"scripts": [ "node_modules/jquery/dist/jquery.min.js", "src/custom.js" ]

fonction jQuery :

 function A() { alert('A'); } function B() { alert('B'); }

J’ai importé jQuery dans mon composant où j’ai besoin d’appeler ces fonctions jQuery: –

 import * as $ from 'jquery';

tsconfig.app.json :

 { "extends": "../tsconfig.json", "comstackrOptions": { "outDir": "../out-tsc/app", "allowJs": true, "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] }

Maintenant, comment importer custom.js dans mon composant et comment appeler ces fonctions A & B?

Je vous recommande d’installer les types pour jquery si vous ne l’avez pas déjà fait:

 npm install --save @types/jquery

Donc, vous pouvez simplement l’utiliser simplement en important jQuery ( jquery ) dans votre composant / service:

 import 'jquery';

Lorsque vous rencontrez des problèmes lors de la compilation ou de la build votre application, vous pouvez résoudre le problème en introduisant votre sélecteur dans ( ...) ou (... as any) :

 // Use this ( $('.myElement')).A(); // or this ($('.myElement') as any).A();

Mise à jour (voir commentaires)

Pour exécuter le code une fois la page prête, essayez de mettre en œuvre AfterViewInit sur votre composant principal ( 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 pour AfterViewInit