Angular引入第三方JS插件

1、在angular-cli.json或者angular.json中引入第三方js插件文件，注意引入顺序，例如：

"scripts": [
              "src/assets/lib/jquery/jquery.min.js",
              "src/assets/lib/jquery/jquery-migrate.min.js",
              "src/assets/lib/bootstrap/js/bootstrap.bundle.min.js",
              "src/assets/lib/easing/easing.min.js",
              "src/assets/lib/superfish/hoverIntent.js",
              "src/assets/lib/superfish/superfish.min.js",
              "src/assets/lib/wow/wow.min.js",
              "src/assets/lib/waypoints/waypoints.min.js",
              "src/assets/lib/counterup/counterup.min.js",
              "src/assets/lib/owlcarousel/owl.carousel.min.js",
              "src/assets/lib/isotope/isotope.pkgd.min.js",
              "src/assets/lib/lightbox/js/lightbox.min.js",
              "src/assets/lib/touchSwipe/jquery.touchSwipe.min.js",
              "src/assets/js/main.js"
            ]

2、在需要该js插件的组件中做如下声明：

import * as $ from 'jquery';

declare var $:any；

3、在ngOnInit使用该js插件，例如：

/**
 *  版权所有（C）2018，西安大华时代网络科技有限公司。保留所有权利。
 */
import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

declare var $:any;

/**
 *     页头组件
 *
 * @author 刘宏强
 */
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { 
      
  }

  ngOnInit() {
  
      // Initiate superfish on nav menu
      $('.nav-menu').superfish({
        animation: {
          opacity: 'show'
        },
        speed: 400
      });
      
      // Mobile Navigation
      if ($('#nav-menu-container').length) {
        var $mobile_nav = $('#nav-menu-container').clone().prop({
          id: 'mobile-nav'
        });
        $mobile_nav.find('> ul').attr({
          'class': '',
          'id': ''
        });
        $('body').append($mobile_nav);
        $('body').prepend('');
        $('body').append('

');
        $('#mobile-nav').find('.menu-has-children').prepend('');
    
        $(document).on('click', '.menu-has-children i', function(e) {
          $(this).next().toggleClass('menu-item-active');
          $(this).nextAll('ul').eq(0).slideToggle();
          $(this).toggleClass("fa-chevron-up fa-chevron-down");
        });
    
        $(document).on('click', '#mobile-nav-toggle', function(e) {
          $('body').toggleClass('mobile-nav-active');
          $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
          $('#mobile-body-overly').toggle();
        });
    
        $(document).click(function(e) {
          var container = $("#mobile-nav, #mobile-nav-toggle");
          if (!container.is(e.target) && container.has(e.target).length === 0) {
            if ($('body').hasClass('mobile-nav-active')) {
              $('body').removeClass('mobile-nav-active');
              $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
              $('#mobile-body-overly').fadeOut();
            }
          }
        });
      } else if ($("#mobile-nav, #mobile-nav-toggle").length) {
        $("#mobile-nav, #mobile-nav-toggle").hide();
      }
      
      // Smooth scroll for the menu and links with .scrollto classes
      $('.nav-menu a, #mobile-nav a, .scrollto').on('click', function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          if (target.length) {
            var top_space = 0;
    
            if ($('#header').length) {
              top_space = $('#header').outerHeight();
    
              if( ! $('#header').hasClass('header-fixed') ) {
                top_space = top_space - 20;
              }
            }
    
            $('html, body').animate({
              scrollTop: target.offset().top - top_space
            }, 1500, 'easeInOutExpo');
    
            if ($(this).parents('.nav-menu').length) {
              $('.nav-menu .menu-active').removeClass('menu-active');
              $(this).closest('li').addClass('menu-active');
            }
    
            if ($('body').hasClass('mobile-nav-active')) {
              $('body').removeClass('mobile-nav-active');
              $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
              $('#mobile-body-overly').fadeOut();
            }
            return false;
          }
        }
      });
      
      // Header scroll class
      $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
          $('#header').addClass('header-scrolled');
        } else {
          $('#header').removeClass('header-scrolled');
        }
      });
    
  }

}