Question

我想在Angular 4中使用jquery.js和materialize.js以及它们的.min.js文件。因为有一些html效果可以使用它们。

这是我的模块

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>

Answer 1

您可以使用包管理器进行安装：

npm install jquery --save

然后你可以导入它：

Jquery安装

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

物化安装

npm install angular2-materialize --save

然后你应该导入它：

import { MaterializeModule } from "angular2-materialize";

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

Answer 2

如果您使用的是bower或cdn库，请执行以下步骤：

declare var $: any; // import jQuery

我想使用jquery.js和materialize.js

2 个答案: