angular2 (typescript)에서 jquery와 js 라이브러리를 어떻게 사용합니까?

typescript로 angular js를 angularjs2로 마이그레이션하려고합니다.angular2 (typescript)에서 jquery와 js 라이브러리를 어떻게 사용합니까?

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. 당신이 $를 선언 할 수있는 것보다 당신이 먼저 당신이 구성 요소의 생성자에서 코드를 초기화 할 수 있습니다보다는 index.html을에 을 가져올 수있는 jQuery를 사용하려면

출처

2016-07-24 Mediator

논리를 생성자 클래스에 넣기 만하면됩니다. 아직 시도 했습니까? 및'선언 var $ = 모든' –

Jquery html 요소를 보지 못했습니다. declare var이란 무엇입니까? 어떻게 사용합니까? – Mediator

는

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)에서 jquery와 js 라이브러리를 어떻게 사용합니까?

답변

관련 문제