Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
谁能告诉我,如何将jQuery与Angular4一起使用?_Jquery_Angular_Ng2 Datetime - Fatal编程技术网

谁能告诉我,如何将jQuery与Angular4一起使用?

谁能告诉我,如何将jQuery与Angular4一起使用?,jquery,angular,ng2-datetime,Jquery,Angular,Ng2 Datetime,我想在我的angular项目中使用ng2 datetime, package.json的设置 - { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "postinstall": "typings install", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular

我想在我的angular项目中使用ng2 datetime, 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"
}
}
和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"

    ]
}
我在node_模块中安装了ng2 datetime包和jquery 我安装@types/jquery app.module.ts是

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 {


}
错误TS2314泛型类型“EventHandler”需要2个类型参数。TypeScript虚拟项目S:\ManaraWeb\HotelProject\HotelProject\node\u modules\@types\jquery\index.d.ts 4140处于活动状态 详细显示

按照以下步骤操作:

  • 更新package.json:在依赖项中添加jquery:
    “jquery”:“^3.2.1”
  • 更新angular cli.json:添加jquery脚本:

    “脚本”:[
    “./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');
        }
    }