Ich möchte jquery.js und materialize.js verwenden

Ich möchte jquery.js und materialize.js zusammen mit ihren .min.js-Dateien in Angular 4 verwenden. Da gibt es einige HTML-Effekte, die mit ihnen arbeiten würden.Ich möchte jquery.js und materialize.js verwenden

Das ist mein Modul

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)

und das ist mein 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. 
     } 
    }

Und dies ist der 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>

Quelle

2017-07-20 Saket.k

Was haben Sie bis jetzt gemacht? Haben Sie schon ein Projekt? Verwenden Sie ein Startprojekt? – Doomenik

Just npm install --speichern Sie jquery und stellen Sie sicher, dass Sie einen Verweis auf index.html hinzufügen. – Gayathri

danke, ja ich arbeite an einem Projekt. und was sollte ich tun, um zu materialisieren js –

Sie Paket-Manager installieren verwenden können:

npm install jquery --save

Dann können Sie es importieren so:

JQuery Installation

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

Materialise Installation

npm install angular2-materialize --save

Dann sollten Sie es importieren so:

import { MaterializeModule } from "angular2-materialize"; 

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

Quelle

2017-07-20 11:28:35

Wenn Sie bower oder cdn library verwenden, führen Sie bitte die folgenden Schritte aus:

Quelle

2017-08-05 02:08:52

Das _does import_ jQuery, es verspricht nur dem Typ-Checker, dass jQuery _ zur Laufzeit verfügbar sein wird, was eine ganz andere Sache ist. Dein Kommentar sollte etwas wie "Silence TypeScript warning" lesen, weil es das ist, was es tatsächlich macht. – msanford

Ich möchte jquery.js und materialize.js verwenden

Antwort

Verwandte Themen