How to call third-party js plug-ins in Angular5 (detailed tutorial)

Below I will share with you an article on how to call third-party js plug-ins in Angular5. It has a good reference value and I hope it will be helpful to everyone.

Without further ado, let’s get straight to the topic. There are three most common ways to reference third-party plug-ins. The following takes the jquery plug-in and two plug-ins based on JQuery: nicescroll and rangeSlider as examples.

1. The first method: Configure in the .angular-cli.json file

Steps:

1. Find the script field in the .angular-cli.json file in the project root directory, and add all js files to be referenced in the array (note the order)

"scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"],

2. Make the following statement in the component that needs to use the plug-in (in the .ts file): declare var $:any;

The purpose is to prevent errors during compilation

3. Next, you can use the above three plug-ins normally in the ngOnInit method.

2. The second way: quote the plug-in on the index.html page

Steps:

1. Add the following reference to the index.html page in the root directory:

<script type="text/javascript" src="assets/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="assets/jquery.nicescroll.js"></script>

2. Make the following statement in the component that needs to use the plug-in (in the .ts file): declare var $:any;

The purpose is to prevent compilation errors

3. Next, you can use the above three plug-ins normally in the ngOnInit method

3. Import plug-ins in specific components

Steps:

1. Add the following reference to the ts file that needs to use the plug-in:

import "assets/jquery-3.2.1.js"; 
import "assets/jquery.nicescroll.js"; 
import "assets/ion.rangeSlider.js";

2. Make the following statement in the component that needs to use the plug-in (in the .ts file): declare var $:any;

The purpose is to prevent compilation errors

3. Next, you can use the above three plug-ins normally in the ngOnInit method

The three methods have been introduced. Let’s talk about things that need to be paid attention to. The first two methods need to restart the service to be effective (I was using ng serve at the time, and it will not work if it is not restarted); the third method does not require restarting the service. , you can see the effect directly.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to the usage and functions of the JsChart component

By using the automatic generator in ionic2 What are the method steps?

Code example for file upload through AjaxUpLoad.js (detailed tutorial)

The above is the detailed content of How to call third-party js plug-ins in Angular5 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!