Question

I'm working on creating an Angular 2 front end on an existing project that previously just used JQuery. Is it possible to invoke a JQuery method inside of an Angular 2 component, when that JQuery function exists in a separate file? I'm writing my components in TypeScript, in case that is important to know.

For example, I have a JavaScript file called EditCheckBoxes.js with a method called editCheckBoxes(). In order for editCheckBoxes() to work, I need it to be invoked after a certain component is initiated. My attempted solution was this:

ngOnInit(): void {
    editCheckBoxes();
}

This code gives me the following error:

Cannot find name 'editCheckBoxes'.

Is there any way I can get this to work?

Also, I added declare var $: any; to my component file, so I am able to use JQuery within that component, but I'd rather not copy entire files into my components in order to use them.

EDIT:

The folder structure looks like this:

Plan
   app
      selling
         My Angular 2 component
   Scripts
      EditCheckBoxes.js

In my component, the import statment looks like this: import { editCheckboxes } from '../../Scripts/EditCheckboxes';

Answer 1

You need to import the editCheckboxes method in your typescript file for it to be available.

To do that you first need to export the editCheckboxes function from EditCheckBoxes.js

export function editCheckboxes() { ... }

Next you should just import that function inside your component

import { editCheckBoxes } from './EditCheckBoxes';

Now it can be called in your component: editCheckBoxes();

Answer 2

In order to import function from js file you should at first export it like so:

// EditCheckBoxes.js
module.exports = function editCheckBoxes () { ... };

then add a d.ts file in same directory as your js-file with definition of your module that would be used by Typescript

// EditCheckBoxes.d.ts
declare function editCheckBoxes (): void;
export = editCheckBoxes;

then in your Typescript file you would specify your definition file, import your function and use it like so:

/// <reference path="../../Scripts/EditCheckBoxes.d.ts" />
import editCheckBoxes = require('../../Scripts/EditCheckBoxes');

ngOnInit (): void {
    editCheckBoxes();
}

Invoke JQuery method from Angular 2 component

2 个答案: