0
TypescriptファイルでjQueryが動作しない理由を理解できません。
エラーはありません。それはただ応答していません。クラス= "test"でdivをクリックすると、何も起こらず、app.component.ts内のconsole.logはコンソールに印刷されません。私は困惑している。TypescriptファイルでjQueryを動作させるにはどうすればよいですか？
以下は私のフォルダ構造です。どんな助けもありがとうございます。
--app
----app.component.ts
----main.ts
--node_modules
--typings
--index.html
--jquery.d.ts
--package.json
--tsconfig.json
--typings.json
次おかげ
には、以下の私の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ファイルされている私のmain.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
ある
<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.jです。息子は
{
"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"
}
}
あなたはそれによって何を意味する "動作しない" のですか？エラーメッセージが表示されますか？あなたが見ていないと予想される行動は何ですか？ –
私は間違いをしていません。それはただ応答していません。クラス= "test"でdivをクリックすると、何も起こらず、app.component.ts内のconsole.logはコンソールに印刷されません。私は困惑している。 –
@ChadKerr、どのコンソールエラー？ –