Kann mir jemand sagen, wie man jQuery mit Angular4 benutzt?

Question

Ich möchte Benutzer NG2-Datetime in meinem Winkel Projekt, die Einstellung von 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" 
} 
} 

und 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 NG2-Datetime-Paket und jquery in den node_modules installieren und i installieren @ Typen/jquery die app.module.ts ist

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 Fehler TS2314 Generischer Typ 'EventHandler' benötigt 2 Argument (e). Typoskript Virtuelle Projekte S: \ ManaraWeb \ HotelProject \ HotelProject \ node_modules \ @types \ jquery \ index.d.ts 4140 Aktive Show in Details

Answer 1

folgenden Schritte aus:

1. aktualisieren package.json hinzufügen jquery in Abhängigkeiten: "jquery": "^3.2.1"

2. aktualisieren Winkel cli.json: in jquery Skript:

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

3. mit 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'); 
    } 
} 

`