我想使用jquery.js和materialize.js

我想在Angular 4中使用jquery.js和materialize.js以及它們的.min.js文件。因爲有一些html效果可以與它們一起工作。我想使用jquery.js和materialize.js

這是我的模塊

import { BrowserModule } from '@angular/platform-browser'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' 
import { NgModule } from '@angular/core'; 
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
/*import { NgbModule } from '@ng-bootstrap/ng-bootstrap';*/ 

import { LoginComponent } from './login.component'; 

@NgModule({ 
    declarations: [ 
    LoginComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule 
    ], 
    providers: [LoginComponent], 
    bootstrap: [LoginComponent] 
}) 
export class AppModule { } 

platformBrowserDynamic().bootstrapModule(AppModule)

，這是我component.ts

import { Component } from '@angular/core'; 
    import { NgForm } from '@angular/forms'; 
    @Component({ 
     selector: 'login-form', 
     templateUrl: './login.component.html', 
     styleUrls: ['./../assets/css/main.css', 
        './../assets/css/materialize.css', 
        './../assets/css/materialize.min.css'] 
    }) 
    export class LoginComponent { 
     authenticateUser(loginForm: NgForm) { 
     var data = JSON.stringify(loginForm); 
     console.log(loginForm); 
     console.log(data);return false; 
     // {email: '...', password: '...'} 
     // ... <-- now use JSON.stringify() to convert form values to 
json. 
     } 
    }

這是HTML

<body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col s12 m5 offset-m3 l5 offset-l3"> 
        <div class="login-row"> 
         <div class="login"> 
          <h4>LOGIN</h4> 
         </div> 
         <div class="login-data"> 
          <form #loginForm="ngForm"> 
           <div class="row"> 
            <div class="input-field col s12 
    m12 l12"> 
             <input name="username" 
    id="username" type="text" class="validate" ngModel> 
             <label>Username</label> 
            </div>       
           </div> 
           <div class="row"> 
            <div class="input-field col s12 
m12 l12 "> 
             <input name="password" 
id="password" type="password" class="validate" ngModel> 
             <label 
for="password">Password</label> 
            </div> 
           </div> 
           <div class="col s12 m12 l12 right- 
align"> 
            <a class="waves-effect waves-light 
btn" type="ngSubmit" 
(click)="authenticateUser(loginForm.value)">login</a> 
           </div> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <script src="assets/js/jquery-1.11.2.min.js"></script> 
     <script src="assets/js/materialize.min.js"></script> 

    </body>

來源

2017-07-20 Saket.k

到目前爲止您做了什麼？已經有一個項目了嗎？你使用任何起動器項目？ – Doomenik

只要做npm install --save jquery，並確保你將它的參考添加到index.html。 – Gayathri

謝謝，是的，我正在一個項目上工作。我該怎麼做才能實現js –

您可以使用軟件包管理器安裝：

npm install jquery --save

然後你可以導入，這樣：

jQuery的安裝

`import * as $ from 'jquery'; 
// 
$('#elemId').width(); 
// OR 
// CommonJS style - working with "require" 
import $ = require('jquery')`

Materialise的安裝

npm install angular2-materialize --save

那麼你應該將其導入這樣：

import { MaterializeModule } from "angular2-materialize"; 

@NgModule({ 
    imports: [ 
    //... 
    MaterializeModule, 
    ], 
    //... 
})

來源

2017-07-20 11:28:35

如果您使用的是bower或cdn庫，請執行以下步驟：

declare var $: any; // import jQuery

來源

2017-08-05 02:08:52

這並不是import_jQuery，它只是承諾類型檢查器jQuery _將在運行時可用_這是一個非常不同的事情。你的評論應該像「Silence TypeScript warning」一樣閱讀，因爲這就是它實際做的。 – msanford

我想使用jquery.js和materialize.js

回答

相關問題