0
Ich verstehe nicht, warum meine jQuery nicht in meinen Typescript-Dateien funktioniert.
Ich bekomme keine Fehler. Es reagiert einfach nicht. Wenn ich auf das div mit dem class = "test" klicke, passiert nichts und die console.log in der app.component.ts wird nicht auf die Konsole gedruckt. Ich bin ratlos.Wie bekomme ich jQuery in meinen Typescript-Dateien arbeiten?
Das folgende ist meine Ordnerstruktur. Jede Hilfe wird geschätzt. Dank
--app
----app.component.ts
----main.ts
--node_modules
--typings
--index.html
--jquery.d.ts
--package.json
--tsconfig.json
--typings.json
Das folgende ist mein main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
Das folgende ist mein 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');
});
Das Folgende ist meine Datei 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>
Folgendes ist meine tsconfig.j
Sohn{
"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"
]
}
Das folgende ist mein typings.json
{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
}
}
Was meinst du es "funktioniert nicht"? Erhalten Sie Fehlermeldungen? Was ist das erwartete Verhalten, das Sie nicht sehen? –
Ich bekomme keine Fehler. Es reagiert einfach nicht. Wenn ich auf das div mit dem class = "test" klicke, passiert nichts und die console.log in der app.component.ts wird nicht auf die Konsole gedruckt. Ich bin ratlos. –
@ChadKerr, irgendwelche Konsolenfehler? –