Question

I want to user ng2-datetime in my angular project, the setting of package.json

- {
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
},
    "license": "ISC",
    "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@angular/upgrade": "4.0.0",
    "angular2-moment": "^1.6.0",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "install": "^0.10.1",
    "mydatepicker": "^2.0.26",
    "ng2-datepicker": "^1.8.3",
    "ng2-datetime": "^1.4.0",
    "ng2-translate": "^5.0.0",
    "npm": "^5.3.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.2.0",
    "systemjs": "^0.19.47",
    "zone.js": "^0.8.5"
},
    "devDependencies": {
    "@types/jquery": "^3.2.11",
    "@types/node": "^6.0.60",
    "concurrently": "^3.1.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.2.2"
}
}

and tsconfig

{
    "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    //"lib": [ "es2015", "dom" ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5"

    },
    "exclude": [
    "typings/browser.d.ts",
    "typings/browser",
    "typings/main",
    "typings/main.d.ts",
    "typings/index.d.ts",
    "node_modules"

    ]
}

I install ng2-datetime package and jquery in the node_modules and i install @types/jquery the app.module.ts is

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { RouterModule, Routes } from '@angular/router';
import { Component, ElementRef } from '@angular/core';


import { AppComponent } from "./app.component";
import { LoginComponent } from "./components/login/login.component";
//import { ShowAviRoomComponent } from "./components/Reservation/show-avirooms.component";
import { ShowUsersComponent } from "./components/user/show-users.component"
import { EditUserComponent } from "./components/user/edit-user.component"
import { HomeComponent } from "./components/home/home.component";
import { ProductComponent } from "./components/product/product.component";
import { ProductUpdateComponent } from "./components/product/product-update.component";
import { AboutComponent } from "./components/about/about.component";
import { SettingComponent } from "./components/setting/setting.component"
import { UserComponent } from "./components/user/user.component";
import { ChangePassComponent } from "./components/user/change-pass.component";
import { HeaderComponent } from './components/layout/header.component';
import { FooterComponent } from './components/layout/footer.component';
import { SideNavComponent } from './components/layout/side-nav.component';
import { SidebarComponent } from './components/layout/sidebar.component';
import { TranslateModule } from "ng2-translate";
import { SharedModule } from "./shared.module";

import 'bootstrap/dist/css/bootstrap.css';
import 'jquery/dist/jquery.min.js';
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css';
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
import 'bootstrap-timepicker/css/bootstrap-timepicker.min.css';
import 'bootstrap-timepicker/js/bootstrap-timepicker.js';
import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';

@NgModule({
            imports: [BrowserModule, FormsModule, HttpModule, routing, NKDatetimeModule, TranslateModule.forRoot(), SharedModule.forRoot()],//NKDatetimeModule
            declarations: [AppComponent, HeaderComponent, FooterComponent,
            SideNavComponent, SidebarComponent, LoginComponent, HomeComponent, //*ShowAviRoomComponent,
            ProductComponent, ProductUpdateComponent, AboutComponent,
            SettingComponent, UserComponent, ShowUsersComponent, ChangePassComponent,
            EditUserComponent],
            bootstrap: [AppComponent]
})
export class AppModule {


}

the error is Error TS2314 Generic type 'EventHandler' requires 2 type argument(s). TypeScript Virtual Projects S:\ManaraWeb\HotelProject\HotelProject\node_modules\@types\jquery\index.d.ts 4140 Active show in details

Answer 1

请按照以下步骤操作：

更新package.json ：在依赖项中添加jquery： "jquery": "^3.2.1"
更新angular-cli.json ：添加jquery脚本：

"scripts": [ "../node_modules/jquery/dist/jquery.js", ... ],
使用jquery：

`

import { Component } from '@angular/core';
declare var jQuery:any; 
@Component({
    selector: 'blank',
    ngAfterViewInit() {
        jQuery('body').addClass('gray-bg');
    }   
    ngOnDestroy() {
        jQuery('body').removeClass('gray-bg');
    }
}

`

Can anyone tell me, how to use jQuery with Angular4?

1 个答案: