Jquery 如何在Angular 2中使用mdbootstrap？

在我的任务中，我使用 如何在angular 2组件中使用日期选择器，我必须在jquery中将此代码添加到typescript组件

$（'.datepicker'）.pickadate（）在我的组件中

my_component.ts

import { Component, OnInit, ElementRef } from '@angular/core';
declare var $: any;

@Component({
// selector: 'clients',
templateUrl: './src/client/app/views/clients.html',
})
export class ClientsModel implements OnInit {
constructor(private _elmRef: ElementRef) {}
/* this code not work*/
ngOnInit() {
    $(this._elmRef.nativeElement)
        .find('#date-picker-example')
        .on('click', function(){
            $('#date-picker-example').pickadate();
        });
}
}

my_component.html

<div class="md-form col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-top: 1%;">
     <input type="text" id="date-picker-example" class="form-control datepicker">
     <label for="date-picker-example">Date begin</label>
</div>


开始日期
避免使用jQuery，因为它有自己的选择器体系结构。当它是必要的，然后确定，所以回答你的问题是你能做的

<input type="text" id="date-picker-example" class="form-control datepicker" (click)="dPicker($event)">

我认为如果您想使用MDB日期选择器，就不能使用jQuery。我为自己的项目写了一个包装，希望对你也有帮助。我以它为基础，向您展示了如何制作与
[（ngModel）]
一起工作的自定义组件。我还要求以不同于显示日期的格式保存日期，这增加了一些您可能不必处理的复杂性

需要注意的是，MDB datepicker在内部使用，因此您也可以使用整个API


import{Component，forwardRef，ViewChild，ElementRef，Input，OnChanges，SimpleChanges}来自“@angular/core”；
从“@angular/forms”导入{NG_VALUE_访问器，ControlValueAccessor}；
常量noop=（）=>{
};
导出常量自定义\输入\控制\值\访问器：任意={
提供：NG_值访问器，
useExisting:forwardRef（（）=>DatePickerComponent），
多：真的
};
//MDB的日期选择器的包装器组件，它又是pickadate.js的包装器。
//使用此处概述的方法：http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel
@组成部分({
选择器：“日期选择器”，
模板：``，
提供者：[自定义\输入\控制\值\访问器]
})
导出类DatePickerComponent实现ControlValueAccessor，OnChanges{
//这里需要本机元素，因为我们必须对元素调用.pickadate（）函数。
@ViewChild（'element'）元素：ElementRef；
//以yyyy-mm-dd格式表示当前选定日期的字符串。
私有内部值：any=''；
//表示当前选定日期的js日期对象。
private innerValueDate:Date=null；
//实际显示给用户的格式，但不直接绑定到任何内容。
私有日期格式：字符串='d mmm yyy'；
//jquery对象，它是pickadate.js的api。
private pickerObject：任何；
//稍后由控件值访问器提供的回调占位符
私有onTouchedCallback:（）=>void=noop；
private onChangeCallback:（quo:any）=>void=noop；
//用户可以选择的最短日期
@Input（）minDate:Date；
//如果为true且日期为null，则valid将返回false，invalid将返回true。
@输入（）必需：布尔值；
//在用户打开和关闭日期选择器后为True。当前无法重置它。
公众接触：布尔；
//获取模板中使用的访问器。
获取值（）：字符串{
返回此.innerValue；
};
恩戈尼尼特（）{
//将pickadate插件连接到我们的本地元素。
let元素：any=$（this.element.nativeElement）；
让$pickerInput=element.pickadate({
格式：this.dateFormat，
//如果在设置值时使用非标准格式，则pickadate要求您传入
//formatSubmit告诉插件如何解析它们。
formatSubmit:'yyyy-MM-dd'，
开始：上下文=>{
//为了使ngModel正常工作，我们需要让angular知道该控件已被触动。
这是真的；
这个.ontouchdcallback（）；
//解析日期并设置内部跟踪值。
this.setValue（context.select）；
//让我们知道我们的价值已经改变。
this.onChangeCallback（this.innerValue）；
},
onClose:（）=>{
这是真的；
这个.ontouchdcallback（）；
//破解此MDB日期选择器错误：https://github.com/amsul/pickadate.js/issues/160
$（document.activeElement.blur（）；
}
});
//跟踪我们刚刚创建的picker对象，以便稍后调用它的API。
this.pickerObject=$pickerInput.pickadate（'picker'）；
this.pickerObject.set（'min'，this.minDate）；
}
//属性，使其具有与本机控件相同的行为/接口。
get valid（）：boolean{
返回this.required？！！this.value:true；
}
获取无效（）：布尔值{
return！this.valid；
}
获取错误（）：任何{
返回this.valid？null:{required:true}；
}
//如果要以编程方式显示日期选择器，则使用此选项。
公共showDatePicker（$event）{
this.pickerObject.open（）；
//如果未对此事件停止Propagation（），则不会打开选择器。
// https://github.com/amsul/pickadate.js/issues/481
如果（$事件）{
$event.stopPropagation（）；
}
}
//writeValue、registerOnChange和registerOnTouched来自ControlValueAccessor接口
writeValue（值：任意）{
这个.setValue（值）；
this.pickerObject.set（'select'，this.innerValueDate）；
}
注册变更（fn：任何）{
this.onChangeCallback=fn；
}
注册人（fn：任何）{
this.onTouchedCallback=fn；
}
//当minDate更改时得到通知，这样我们就可以告诉pickadate插件做出相应的响应。
ngOnChanges（更改：SimpleChanges）：无效{
//这实际上是在ngOnInit之前调用的，因此pickerObject可能还不在那里。
if（this.pickerObject&&changes['minDate']）{
this.pickerObject.set（'min'，this.minDate）；
}
}
//******辅助函数******//
//解析并测试新值，但不要通知angular或此处的任何内容。
私有设置值（值）{
如果（！值）{
this.innerValue=''；
this.innerValueDate=null；
}否则{
让newValueDate:Date=newdate（Date.parse（value））；
如果（！this.datesReequal（this.innerValueDate，newValueDate））{
this.innerValue=this.formatDate（newVa
dPicker(e)
{
            $(e.target).pickadate();
}