Question

我需要在Angular 2中使用Bootstrap Datepicker。所以我创建了一个组件如下

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

@Component({
    templateUrl: 'app/views/daily-reports.html'
})

export class DailyReportsComponent implements OnInit {
    constructor(private elRef: ElementRef) {}

    ngOnInit(): void {
        $('#daily-reports').datetimepicker();
    }
}

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='daily-reports'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

在我的index.html文件中，我有所需的所有文件 - js库和css文件，但是我收到了错误

TypeError：无法读取属性＆＃39; addClass＆＃39;未定义的

当我尝试使用没有Angular的相同代码时，我像往常一样正常工作。有没有办法解决问题，或者任何人都可以告诉我如何在Angular2中使用这个插件

Answer 1

您必须将该初始化放在ngAfterViewInit中，因为DOM尚未在ngOnInit中呈现，因此将无法找到JQuery中的选择器，从而返回undefined。< / p>

ngAfterViewInit(): void {
    $('#daily-reports').datetimepicker();
}

Answer 2

然后在declare var jQuery:any;添加：

中使用ngAfterViewInit

jQuery(this.el.nativeElement).find('div[id="daily-reports"]').datetimepicker({format: 'LT'})

使用Angular2的Bootstrap Datepicker

2 个答案: