Angular2 using custom directives (Directive) to load jquery plugins

Due to the rise of Angular2 soon, the relevant plug-ins are still very few, so sometimes have to use some jquery plug-ins to complete the project,

So how do you put the jquery plugin in the angular2? Use custom directives!

To introduce jquery before the context, this no longer describes

First, create a directive that uses the @input method to get the parameters required by the jquery plugin.

In Ngonchanges, when the parameter is passed through @input, the jquery plugin is initialized,

Initializing the jquery plugin requires getting DOM elements, so we introduced elementref to get DOM elements

Here we need to talk about the callback function in jquery, if you use this directly, the callback is unable to get the angular function.

So this takes the form of bind and passes this in. This way the functions in the angular are called correctly.

The following is the code that implements the time plug-in:

Import {Directive, Output, Input, Elementref, eventemitter} from ' @angular/core ';//introduction of Jquery.daterangepicker plug-in related JS and css,css packaging needs to be packaged into a single file, or directly in the HTML separate reference
How to package separately please see the next section of code
Require ('.. /.. /.. /.. /assets/lib/bootstrap-daterangepicker-master/daterangepicker.js '); require (‘.. /.. /.. /.. /assets/lib/bootstrap-daterangepicker-master/daterangepicker.css ');//Custom Directives@Directive ({selector:' [Daterangepicker] ',}) Export class Daterangepicker {/** * parameters required for Jquery.daterangepicker plugin * parameter: http://www.daterangepicker.com/#options*/@Input () public daterangepickeroptions:ijquerydaterangepicker; //Check Events@Output () Selected:any =NewEventemitter (); /** * Initialize * @param _elementref*/Constructor (Private _elementref:elementref) {}/** * when the property changes * @private*/Ngonchanges () {$ ( This. _elementref.nativeelement). Daterangepicker ( This. Daterangepickeroptions, This. Datecallback.bind ( This)); }  /** * use emit to pass events when time changes occur * @private*/datecallback (start, end) {Let format= "Yyyy-mm-dd"; if( This. DateRangePickerOptions.locale.format) {Format= This. DateRangePickerOptions.locale.format; } Let date={startDate:start.format (format), EndDate:end.format (format),} This. Selected.emit (date); }}

Import {Component} from ' @angular/core '; import {Daterangepicker} from‘.. /.. /theme/directives '; @Component ({selector:' Dashboard ', Template: '<div class= "Form-group" > <label for= "StartDate" >{date.startDate}</label> <input Daterangepicker [daterangepickeroptions]= "option"(selected)= "dateselected ($event)"type= "Text"class= "Form-control" > </div>', directives: [Daterangepicker]}) Export class Dashboard {/** * The currently selected time*/Public Date:any/** * jquery time plugin parameters*/Private Option:object={locale: {format:"Yyyy-mm-dd", Separator:To, Applylabel:Determine, Cancellabel:Cancel, Fromlabel:' Start time ', Tolabel:' End Time ', Customrangelabel:' Custom ', DaysOfWeek: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], monthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ',        ' July ', ' August ', ' September ', ' October ', ' November ', ' December '], FirstDay:1    },  }; Constructor () {}/** * Emit callback event, get selected Time * @param date*/dateselected (date) { This. Date =date; }}

Also note that the CSS needs to be separately packaged, or HTML separate reference, how to package CSS, please see Finally, I here is packaged with Webpack

// use Extracttextplugin to separate the jquery plugin for CSS packaging loaders: [{        /daterangepicker\.css$/,        loader:ExtractTextPlugin.extract (' Style-loader ', ' Css-loader ')      }]plugins: [         new extracttextplugin (' [name].css ', {              True         })]

Angular2 using custom directives (Directive) to load jquery plugins