angular6引入jquery和jquery插件

文章参考

1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
2. angular4引入jQuery和基于jQuery的插件！

案例说明

一、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"
]

二、在业务逻辑代码中

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();
  } 
}