我不能在 angular2 中使用此代码。如何使用它答案

【问题标题】：i cant use this code in angular2. how to use it我不能在 angular2 中使用此代码。如何使用它
【发布时间】：2019-11-02 19:06:50
【问题描述】：

Script/Jquery：我不能将此代码用于 Angular 2。如何在 Angular 2 中使用此脚本？或与我分享示例链接。

    $(document).ready(function () {
        var data_input=$('input[name="date"]');
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent():"body";
        data_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 

<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />

<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="date">
       Date
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
      </div>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

此代码仅在正常模式下有效。它在 angular2 中不起作用。请帮我解决这个问题

    $(document).ready(function () {
        var data_input=$('input[name="date"]');
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent():"body";
        data_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })

HTML

<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="date">
       Date
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
      </div>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

【问题讨论】：

别大喊大叫了，这太粗鲁了

标签： angular

【解决方案1】：

您不应该在 angular/angular2 渲染管道之外运行 jquery/其他插件。可能的解决方案是：

使用现有的 angualr2 组件库（https://valor-software.com/ng2-bootstrap/#datepicker、http://www.primefaces.org/primeng/ 或任何供应商的插件）

创建您自己的组件，类似于：

import { Component, Input, Output, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { ViewChild, EventEmitter, ElementRef } from '@angular/core';
@Component({
   selector: 'date-time-picker',
   template: '<input #input type="text" class="form-control" />' 
})
export class DatetimePickerComponent implements AfterViewInit {
   @ViewChild('input') input:ElementRef;
   ngAfterViewInit() { //only here you are sure that html is available.
       $(this.input.nativeElement).datepicker({
          format: 'mm/dd/yyyy',
          container: container,
          todayHighlight: true,
          autoclose: true 
       });
   }
}

并在您的应用中随处使用它：

<date-time-picker />

也许你也对 EventEmitter 感兴趣，用来捕捉所选值的变化。

如果需要：这是我编写的指令的完整代码，用于使用 http://eonasdan.github.io/bootstrap-datetimepicker/ 和 angular2 应用程序中的两种方式数据绑定：

    import { Component, Input, Output, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
    import { ViewChild, EventEmitter, ElementRef } from '@angular/core';
    import { ControlValueAccessor, NgControl } from '@angular/common';
    import * as moment from 'moment';

    declare var $: JQueryStatic;

    //http://eonasdan.github.io/bootstrap-datetimepicker/

    @Component({
        //moduleId: module.id,
        selector: 'date-time-picker',
        template: '<input #input type="text" class="form-control" />'
    })
    export class DatetimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {

        @Input('view-mode') viewMode: string;
        @Input('view-format') viewFormat: string;

        @Input('ngModel') ngModel:Date;
        @Output('ngModelChanged') ngModelChanged:EventEmitter<Date>;

        private ngModelChangeCallback:(Date)=>void;
        private ngModelTouchedCallback:Function;

        private jqueryObject: any;

        @ViewChild('input') input:ElementRef;

        constructor(private ctrl: NgControl) { 
            this.ctrl.valueAccessor = this;
            this.ngModelChanged = new EventEmitter<Date>();
        }

        ngAfterViewInit() { 
            let jElement:any =  $(this.input.nativeElement);

            this.jqueryObject = jElement.datetimepicker({
                viewMode: this.viewMode,
                format: this.viewFormat,
                defaultDate: this.ngModel
            });

            this.jqueryObject.on("dp.change", (e:any) => {
                //this.ngModelChange.emit(e.date.toDate());
                this.ngModelChangeCallback(e.date);
                this.ngModelChanged.emit(e.date);
            });
            this.jqueryObject.on("dp.show", (e:any) => {
                this.ngModelTouchedCallback(e.date);
            });

        }

        ngOnInit() {

        }

        ngOnDestroy() {
            if(this.jqueryObject) {
                $(this.jqueryObject).data("DateTimePicker").destroy();
            }
        }

        writeValue(date:Date) {
            if(!this.ngModel && !date) //no changes
                return;

            if(!moment(this.ngModel).isSame(date)) {
                this.ngModel = date; 

                if(this.jqueryObject) {
                    $(this.jqueryObject).data("DateTimePicker").date(this.ngModel);
                }
            }
        }

        registerOnChange(fn: (Date)=>void) {
            this.ngModelChangeCallback = fn;
        }

        registerOnTouched(fn: Function){
            this.ngModelTouchedCallback=fn;
        }
    }

在其他组件中用作：

  <date-time-picker [(ngModel)]="selectedDate" (ngModelChanged)="selectedMonthChanged($event)" view-mode='years' view-format='MM/YYYY'></date-time-picker>

【讨论】：

感谢您的回复。但显示错误，“类 'DatePickerComponent' 错误地实现了接口 'On Destroy'。'DatePickeComponent' 类型中缺少属性 'ngOnDestroy'。
我已经对其进行了编辑，删除了未实现的接口 + 添加了指令的完整代码。我不知道我是否遵循了最佳做法，很高兴收到建议。

【解决方案2】：

我相信您在使用 Angular 2 时需要一个新的 JS 代码入口点。

见Angular2 equivalent of $document.ready()

我不认为您可以轻松地在 Angular2 中运行您的 Bootstrap/Jquery 代码而不进行移植。你在用https://valor-software.com/ng2-bootstrap/吗？

【讨论】：