文章参考
案例说明
一、angular-cli.json引入jquery和jquery插件
"scripts": [
"node_modules/jquery/dist/jquery.js",
"src/assets/bootstrapvalidator/js/bootstrapValidator.min.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
二、在业务逻辑代码中
没有类型说明,则使用
declare var $: any
import {Component, OnInit, OnDestroy} from '@angular/core';
import {HttpInterceptorService} from '../../../utils/http-interceptor.service';
import {API_CONFIG} from '../../../config/apiConfig';
import { SERVER_CONFIG } from '../../../config/serverConfig';
import { SERVER_DATA } from '../../../config/data';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import _ from 'lodash';
// 一定要声明 $ 符,不然编译会报错,
// 如果 import * as $ from 'jquery';这样声明则编译会提示不识别 $('#searchForm').bootstrapValidator()这个方法,编译依然不过
declare var $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
public eventDetailObj = null;
public http: HttpInterceptorService;
public modalRef: BsModalRef;
public modalService: BsModalService;
// 构造函数,注入 HttpInterceptorService
constructor (httpService: HttpInterceptorService, modalService: BsModalService) {
this.http = httpService;
this.modalService = modalService;
}
validFormAction () {
$('#searchForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
keyword: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'please enter a key word.'
}
}
},
userInputLocation: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'please enter a location.'
}
}
},
}
})
// .on('success.form.bv', function(e) {
// debugger
// // 阻止默认事件提交
// e.preventDefault();
// });
$('#searchForm').submit(function(e){
e.preventDefault();
});
}
ngOnInit() {
this.validFormAction();
this.getUserLocation();
this.getLocationByAddress();
}
}