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