Question

我不明白为什么我的jQuery在我的Typescript文件中不起作用我没有得到任何错误。它只是没有响应。当我点击带有class =“test”的div时，没有任何反应，app.component.ts中的console.log不会打印到控制台。我很难过。

以下是我的文件夹结构。任何帮助表示赞赏。感谢

    --app
    ----app.component.ts
    ----main.ts
    --node_modules
    --typings
    --index.html
    --jquery.d.ts
    --package.json
    --tsconfig.json
    --typings.json

以下是我的主要内容

    import {bootstrap}    from 'angular2/platform/browser';
    import {AppComponent} from './app.component';

    bootstrap(AppComponent);

以下是我的app.component.ts

    /// <reference path="../jquery.d.ts" />
    import {Component} from 'angular2/core';

    declare var $: Function;

    @Component({
      selector: 'my-app',
      template: `<h1>My First Angular 2 App</h1>
                 <div class="test">TEST</div>`
    })
    export class AppComponent {}

    $('.test').click(function(){
    $('.test').hide();
    console.log('testing');
    });

以下是我的index.html文件

     <html>
       <head>
         <title>Angular 2 QuickStart</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="styles.css">

         <!-- 1. Load libraries -->
         <!-- IE required polyfills, in this exact order -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
         <script src="node_modules/es6-shim/es6-shim.min.js"></script>
         <script src="node_modules/systemjs/dist/system-polyfills.js">  </script>
         <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

         <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
         <script src="node_modules/systemjs/dist/system.src.js"></script>
         <script src="node_modules/rxjs/bundles/Rx.js"></script>
         <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

         <!-- 2. Configure SystemJS -->
         <script>
           System.config({
             packages: {
             app: {
             format: 'register',
             defaultExtension: 'js'
             }
           }
         });
         System.import('app/main')
           .then(null, console.error.bind(console));
         </script>
        </head>

        <!-- 3. Display the application -->
        <body>
          <my-app>Loading...</my-app>
        </body>
       </html>

以下是我的tsconfig.json

  {  
   "compilerOptions": {
   "target": "es5",
   "module": "system",
   "moduleResolution": "node",
   "sourceMap": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "removeComments": false,
   "noImplicitAny": false
  },
   "exclude": [
   "node_modules",
   "typings/main",
   "typings/main.d.ts"
   ]
  }

以下是我的typings.json

{
 "ambientDependencies": {
 "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
 "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
 }
}

Answer 1

而不是$('.test')使用JQuery.Of('.test')

如何在我的Typescript文件中使用jQuery？

1 个答案: