如何在angular2（typescript）上使用js庫和jquery？

我嘗試使用打字稿將angular js移植到angularjs2。如何在angular2（typescript）上使用js庫和jquery？

我不明白如何使用js庫。我主要app.component，我想初始化一些庫，例如簡單的一行：

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

和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>

一般main.ts

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

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

bootstrap(AppComponent);

和空的app.component。

來源

2016-07-24 Mediator

只是把你的邏輯放在你的類的構造函數中。試過了嗎？和'聲明var $ = any' –

Jquery沒有看到html元素。什麼是聲明var？它如何使用？ – Mediator

爲了使用jQuery，你首先必須在index.html的導入，比你可以在組件的構造函數初始化代碼

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

的情況下，IDE會顯示錯誤比你可以聲明$任何類型的在這樣的類的頂部： -

...some code here 
declare var $ : any; 

export class App{ 
..///code goes here 
}

也看到可以幫助你

how to use jquery in angular 2?

來源

2016-07-24 19:06:01

太棒了！仍然不明白在哪裏寫聲明var $：any; 。我使用VS 2015 – Mediator

你可以在課堂上寫作。 @Mediator看到我的更新 –

我可以寫組件裝飾器 – Mediator

如何在angular2（typescript）上使用js庫和jquery？

回答

相關問題