Fatal编程技术网
  • javascript/
  • Javascript Jquery滑块不适用于Angular 6&；以上是导航，但正在进行页面刷新

Javascript Jquery滑块不适用于Angular 6&；以上是导航，但正在进行页面刷新

javascript html jquery angular

Javascript Jquery滑块不适用于Angular 6&；以上是导航，但正在进行页面刷新,javascript,html,jquery,angular,mean-stack,Javascript,Html,Jquery,Angular,Mean Stack,我在我的主组件上添加了一个滑块。当我为应用程序服务时，我的滑块第一次就完美地工作了。但是当我导航到其他组件并返回到主组件时，我的滑块停止工作。如果我刷新页面，它将再次开始工作。我已经在index.html文件中包含了slider所需的.js和.css文件我不想使用npm安装jquery和引导。另外，我不想在Angular.json文件的脚本和样式数组中添加css文件和.js文件 My app.component.html如下所示：- <app-header></app-head

我在我的主组件上添加了一个滑块。当我为应用程序服务时，我的滑块第一次就完美地工作了。但是当我导航到其他组件并返回到主组件时，我的滑块停止工作。如果我刷新页面，它将再次开始工作。我已经在index.html文件中包含了slider所需的.js和.css文件我不想使用npm安装jquery和引导。另外，我不想在Angular.json文件的脚本和样式数组中添加css文件和.js文件

My app.component.html如下所示：-

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
My index.html如下所示

<!doctype html>
<html lang="en">
<head>
  <title>Mysite</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- for-mobile-apps -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Super Market Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
  <app-root></app-root>
  <!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- top-header and slider -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>
<!-- //here ends scrolling icon -->
<script src="js/minicart.min.js"></script>
<script>
// Mini Cart
paypal.minicart.render({
action: '#'
});

if (~window.location.search.indexOf('reset=true')) {
paypal.minicart.reset();
}
</script>
<!-- main slider-banner -->
<script src="js/skdslider.min.js"></script>
<link href="css/skdslider.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo1').skdslider({'delay':5000, 'animationSpeed': 2000,'showNextPrev':true,'showPlayButton':true,'autoSlide':true,'animationType':'fading'});
jQuery('#responsive').change(function(){
 $('#responsive_wrapper').width(jQuery(this).val());
});
});
</script>
<!-- //main slider-banner -->
</body>
</html>


麦斯特
addEventListener（“加载”，函数（）{setTimeout（hideURLbar，0）；}，false）；
函数hideURLbar（）{window.scrollTo（0,1）；}
jQuery（文档）.ready（函数（$）{
$（“.scroll”）。单击（函数（事件）{
event.preventDefault（）；
$（'html，body'）.animate（{scrollTop:$（this.hash.offset（）.top}，1000）；
});
});
$（文档）.ready（函数（）{
/*
var默认值={
containerID:'toTop'，//元素id
containerHoverID:'toTopHover'，//衰减元素悬停id
滚动速度：1200，
easingType:“线性”
};
*/
$（）.uitop（{easingType:'easeOutQuart'}）；
});
//小推车
paypal.minicart.render({
行动：'#'
});
if（~window.location.search.indexOf（'reset=true'））{
paypal.minicart.reset（）；
}
jQuery（文档）.ready（函数（）{
skdslider（{'delay'：5000，'animationSpeed'：2000，'showNextPrev'：true，'showPlayButton'：true，'autoSlide'：true，'animationType'：'facing'）；
jQuery（“#响应”）.change（function（）{
$（'#responsive_wrapper'）.width（jQuery（this.val（））；
});
});