jquery - 我正在使用 Angular 2 Angular-CLI 并尝试使用 ng2-datetime，但它给出了错误 "TypeError: Cannot read property ' jQuery' of undefined”

Question

我使用命令“npm install -g angular-cli”安装了 angular2 cli，并且我想在我的项目中使用 ng2-datetime。但它显示错误“TypeError:无法读取未定义的属性‘jQuery’”。如何我可以在 angular2 cli 中使用 ng2-datetime 吗？这是 ng2-datetime enter link description here 的链接

我想包含上面的 ng2-datetime。

我收到以下错误。

这是我的应用程序模块

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { Ng2PlayRoutingModule } from './app.routing'; import { AppComponent } from './app.component'; import { GridviewComponent } from './dashboard/gridview/gridview.component'; import { DetailsComponent } from './dashboard/details/details.component'; import { Logincomponent } from './login/login.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { DrilldownComponent } from './dashboard/drilldown/drilldown.component'; import { DropdownModule } from 'ng2-bootstrap'; import { WorkbenchComponent } from './workbench/workbench.component'; import { TasksComponent } from './workbench/tasks/tasks.component'; import { TaskdetailsComponent } from './workbench/taskdetails/taskdetails.component'; import { TopnavComponent } from './shared/topnav/topnav.component'; import { FieldfilterPipe } from './shared/pipes/fieldfilter.pipe'; import { LimitFirstNPipe } from './dashboard/details/limit-first-n.pipe'; import { DatepickerDirective } from './shared/directives/datepicker.directive'; import { CalendarComponent } from './workbench/calendar/calendar.component'; import { DateFilterPipe } from './workbench/calendar/date-filter.pipe'; import { StopscrollDirective } from './shared/directives/stopscroll.directive'; import { CapitalizePipe } from './workbench/tasks/capitalize.pipe'; import { ConfirmDeleteDirective } from './shared/directives/confirm-delete.directive'; import { NumberPipe } from './shared/pipes/number.pipe'; import { FilterPipe } from './shared/pipes/filter.pipe'; import { PriorityPipe } from './shared/pipes/priority.pipe'; import { TopnextnavComponent } from './shared/topnextnav/topnextnav.component'; import { ActiveTabDirective } from './shared/topnextnav/active-tab.directive'; import { AtozPipe } from './shared/pipes/atoz.pipe'; import { ExcludePipe } from './shared/pipes/exclude.pipe'; import { AddtaskComponent } from './workbench/addtask/addtask.component'; import { MomentFormatPipe } from './shared/pipes/moment-format.pipe'; import { JqteEditorDirective } from './shared/directives/jqte-editor.directive'; import { MultiselectComponent } from './shared/md2-comp/multiselect/multiselect.component'; import { TimepickerComponent } from './shared/md2-comp/timepicker/timepicker.component'; import { JquerydatepickerDirective } from './shared/directives/jquerydatepicker.directive'; import { DatefilterPipe } from './shared/pipes/datefilter.pipe'; import { Injectable } from '@angular/core'; import { EventService } from './shared/service/event.service'; import { DrilldownService } from './dashboard/drilldown/drilldown.service'; import { ActiveTab } from './shared/directives/activetab.directive'; import { NKDatetime } from 'ng2-datetime/ng2-datetime';

//import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';


@NgModule({   declarations: [
    AppComponent,
    GridviewComponent,
    DetailsComponent,
    Logincomponent,
    DashboardComponent,
    DrilldownComponent,
    WorkbenchComponent,
    TasksComponent,
    TaskdetailsComponent,
    TopnavComponent,
    FieldfilterPipe,
    LimitFirstNPipe,
    DatepickerDirective,
    CalendarComponent,
    DateFilterPipe,
    StopscrollDirective,
    CapitalizePipe,
    ConfirmDeleteDirective,
    DateFilterPipe,
    NumberPipe,
    FilterPipe,
    PriorityPipe,
    TopnextnavComponent,
    ActiveTabDirective,
    AtozPipe,
    ExcludePipe,
    AddtaskComponent,
    MomentFormatPipe,
    JqteEditorDirective,
    MultiselectComponent,
    TimepickerComponent,
    JquerydatepickerDirective,
    JquerydatepickerDirective,
    ActiveTab,
    NKDatetime   ],   imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Ng2PlayRoutingModule,
    DropdownModule   ],   // exports: [NKDatetime],   providers: [EventService,DrilldownService],   bootstrap: [AppComponent] }) export class AppModule { }

drilldown.component.html

 <main class="container">
        <section>
            <div class="panel-body">
                <datetime [timepicker]="false" [(ngModel)]="date"></datetime>
            </div>
        </section>

    </main>

Answer 1

尝试以下步骤:

• 安装“ng2-datetime”:“1.2.1”
• 安装"@types/jquery": "^2.0.33"
• 在tsconfig.json中指定"types": ["jquery"]

这对我有用。