Wie verwenden js-Bibliothek jquery auf angular2 (Typoskript)?

Ich versuche zu migrieren, angular js zu angularjs2 mit Typoskript.

Ich kann nicht verstehen, wie man js-Bibliothek.
Ich habe Haupt-app.Komponente wo ich will, initialisieren manche Bibliothek, zum Beispiel einfach Zeile:

$('#home').height($(window).height());

und initialisieren von attribute data-spy="scroll" data-target="#header-navbar" data-offset="51"

Index.html

<body data-spy="scroll" data-target="#header-navbar" data-offset="51" class="pace-done">

    <pm-app>Loading App...</pm-app>


    <!-- ================== BEGIN BASE JS ================== -->
    <script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
    <script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
        <script src="assets/crossbrowserjs/html5shiv.js"></script>
        <script src="assets/crossbrowserjs/respond.min.js"></script>
        <script src="assets/crossbrowserjs/excanvas.min.js"></script>
    <![endif]-->
    <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
    <script src="assets/plugins/scrollMonitor/scrollMonitor.js"></script>
<script src="assets/js/landing-apps.js"></script>

    <!-- ================== BEGIN BASE JS ================== -->
      <script src="assets/plugins/pace/pace.min.js"></script>
    <!-- ================== END BASE JS ================== -->
<!-- ================== END BASE JS ================== -->
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.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/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>


    <!-- Required for http -->
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

    <!-- Required for routing -->
    <script src="node_modules/angular2/bundles/router.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>

</body>

general main.ts

import { bootstrap }    from 'angular2/platform/browser';

//Our main component
import { AppComponent } from './app.component';

bootstrap(AppComponent);

und leere app.Komponente.

  • geben Sie einfach Ihre Logik im Konstruktor Ihrer Klasse.Haben Sie versucht, noch ? und declare var $=any
  • Jquery nicht sehen, html-element. Was ist zu deklarieren var ? Wie Sie es verwenden?
InformationsquelleAutor Mediator | 2016-07-24

 

One Reply
  1. 1

    Um jQuery verwenden Sie müssen Sie zunächst den import in die index.html,
    als Sie initialisieren können Ihren code in den Konstruktor der Komponente

    constructor(){
       .....
       $('#home').height($(window).height());
    }

    im Falle IDE zeigt Fehler, als Sie erklären können $ jeglicher Art an der Spitze der Klasse wie folgt aus :-

    ...some  code here 
    declare var $ : any;
    
    export class App{
    ..///code goes here
    }

    sehen, auch kann Ihnen helfen,

    • Super!!! Durch die noch immer nicht verstehen, wo Sie schreiben, deklarieren var $ : alle; . Ich benutze VS 2015
    • Sie können schreiben Sie an der Spitze der Klasse. @Mediator, siehe mein update
    • Ich kann schreiben, bevor Component decorator
    • ja können Sie 🙂
    • Aber ist es eine gute Lösung für angularjs2?
    • Ich bin nicht ziemlich sicher, aber ich habe das gleiche während der Codierung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.