本文共 3710 字，大约阅读时间需要 12 分钟。

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('<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>');         $('body').append('<div id="mobile-body-overly"></div>');         $('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>');              $(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');         }       });        }

}

 

转载地址：https://daqiang.blog.csdn.net/article/details/85553081 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！