如何在Angular 4中导航到主页更改屏幕大小？
我正在建立一个角度为4和asp.net的网站.
当您进入网站时,您可以看到适合移动尺寸的主页(这就是我想要的).
然后当我导航到订单页面时,它看起来像这样:
订单页面
但是当我从订单页面再次导航回主页时,它会更改屏幕,根本不适合移动设备.
码:
app.component.html
<app-nav_mobile></app-nav_mobile>
<app-header></app-header>
<app-navbar></app-navbar>
<router-outlet> </router-outlet>
<app-footer></app-footer>
nav_mobile.component.html
<div id="preloader" class="signature-dierk">
<div id="status"></div>
</div>
<!-- end : preloader -->
<!-- mobile only navigation : starts -->
<nav class="mobile-nav signature-dierk">
<ul class="slimmenu">
<li><a [routerLink]="['/home']">Home page</a></li>
<li><a [routerLink]="['/order']">orders</a></li>
<li><a href="checkout.html">checout </a></li>
<li><a href="products.html">producst</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="about.html">about</a></li>
</ul>
</nav>
<!-- mobile only navigation : ends -->
home.component.html
<section class="mastwrap signature-dierk">
<div class="inner-wrap">
<section class="intro07 signature-dierk">
<div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullscreen-container">
<!-- START REVOLUTION SLIDER 4.6.5 fullscreen mode -->
<div id="rev_slider_3_1" class="rev_slider fullscreenbanner">
<ul>
<!-- SLIDE -->
<li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off">
<!-- MAIN IMAGE -->
<img data-no-retina alt="" title="" src="/dist/assets/images/bg1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption featured-caption-one font3bold black lft ltb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="0"
data-speed="600"
data-start="600"
data-easing="easeInOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="800"
data-endeasing="easeInOutQuad">
<span class="font3bold black">logo </span>
</div>
</li>
<!-- SLIDE -->
<li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off">
<!-- MAIN IMAGE -->
<img data-no-retina alt="" title="" src="/dist/assets/images/bg2.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption featured-caption-two font3light white lft ltb tp-resizeme"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="0"
data-speed="600"
data-start="600"
data-easing="easeInOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="800"
data-endeasing="easeInOutQuad">
<span class="font3light color-bg white">??? ?????? ???</span>
</div>
</li>
<!-- SLIDE -->
<li data-transition="slidedown" data-slotamount="7" data-masterspeed="1200" data-saveperformance="off">
<!-- MAIN IMAGE -->
<img data-no-retina alt="" title="" src="/dist/assets/images/bg3.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption featured-caption-three font3bold white lft ltb tp-resizeme text-center"
data-x="center" data-hoffset="0"
data-y="center" data-voffset="0"
data-speed="600"
data-start="600"
data-easing="easeInOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="800"
data-endeasing="easeInOutQuad">
?????? ????????<span class="font3 color">?????? ????? ?????? ?????</span>
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
</div>
</div>
</section>
</div>
<!-- end : inner-wrap -->
<!--footer-->
我的路由器模块的一部分:
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'order', component: OrderComponent },
{ path: '**', redirectTo: 'home' }
])
在_layour.cshtml中调用滑块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Baber_App</title>
<base href="~/" />
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<!-- design css files - start -->
<link href="~/dist/assets/stylesheets/animatedheaders.css" rel="stylesheet" />
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="~/dist/assets/images/favicon.png"/>
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600%7CMontserrat:400,700%7COpen+Sans:400,300,700,800' rel='stylesheet' type='text/css'>
<!-- ICON FONTS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="~/dist/assets/stylesheets/ionicons.min.css">
<link rel="stylesheet" href="~/dist/assets/fonts/fonts.css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="~/dist/assets/stylesheets/bootstrap.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/isotope.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/venobox.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/sinister.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/animatedheaders.css">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="~/dist/assets/rs-plugin/css/settings.css" media="screen" />
<link rel="stylesheet" href="~/dist/assets/stylesheets/featured.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/slimmenu.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/main.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/main-bg.css">
<link rel="stylesheet" href="~/dist/assets/stylesheets/main-responsive.css">
<!-- design css files - end -->
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
<script src="~/dist/assets/javascripts/libs/common.js"></script>
<script src="~/dist/assets/javascripts/libs/bootstrap.min.js"></script>
<script src="~/dist/assets/javascripts/libs/animatedheaders.js"></script>
<script src="~/dist/assets/javascripts/custom/main.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="~/dist/assets/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="~/dist/assets/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript">
/******************************************
- PREPARE PLACEHOLDER FOR SLIDER -
******************************************/
jQuery(document).ready(function () {
jQuery('#rev_slider_3_1').show().revolution(
{
dottedOverlay: "none",
delay: 9000,
startwidth: 1200,
startheight: 500,
hideThumbs: 0,
thumbWidth: 100,
thumbHeight: 50,
thumbAmount: 3,
simplifyAll: "off",
navigationType: "bullet",
navigationArrows: "none",
navigationStyle: "round",
touchenabled: "on",
onHoverStop: "on",
nextSlideOnWindowFocus: "off",
swipe_threshold: 75,
swipe_min_touches: 1,
drag_block_vertical: false,
keyboardNavigation: "off",
navigationHAlign: "right",
navigationVAlign: "center",
navigationHOffset: 20,
navigationVOffset: 0,
soloArrowLeftHalign: "left",
soloArrowLeftValign: "center",
soloArrowLeftHOffset: 20,
soloArrowLeftVOffset: 0,
soloArrowRightHalign: "right",
soloArrowRightValign: "center",
soloArrowRightHOffset: 20,
soloArrowRightVOffset: 0,
shadow: 0,
fullWidth: "off",
fullScreen: "on",
spinner: "spinner0",
stopLoop: "off",
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle: "off",
forceFullWidth: "off",
fullScreenAlignForce: "off",
minFullScreenHeight: "",
hideTimerBar: "on",
hideThumbsOnMobile: "off",
hideNavDelayOnMobile: 1500,
hideBulletsOnMobile: "off",
hideArrowsOnMobile: "off",
hideThumbsUnderResolution: 0,
fullScreenOffsetContainer: "#pseudo-header",
fullScreenOffset: "",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
startWithSlide: 0
});
}); //ready
</script>
</body>
</html>
这里的主要问题是你在没有包装器的情况下将 Jquery 插件与 Angular 混合在一起。
第一次加载应用程序时，它会起作用，因为 onready 是最后运行的脚本（请记住，浏览器从上到下同步执行标签）。
一旦您访问订单页面，Angular 就会修改 DOM，并且滑块将不再存在。
当您浏览回主页时，Angular 会生成相应的 HTML（包括滑块），但它永远不会执行配置滑块的脚本。
这里有两种可能的解决方案，一种可以快速解决此问题，但在技术上是错误的，另一种是正确的方法。
快速但错误： 将所有内容复制到jQuery(document).ready(function () { }); 例如，名为sliderSetup()的新函数。在 Home 组件中实现 Angular ngOnReady 方法并从那里调用sliderSetup()。
Angular 方式： 搜索滑块的 Angular 实现。例如：
- https://www.npmjs.com/package/angular2-carousel-simple
- https://www.npmjs.com/package/ng2-owl-carousel
- https://www.npmjs.com/package/angular2-useful-swiper
免责声明：还没有测试过其中任何一个，只是在谷歌上搜索了一些例子。
让我知道事情的后续。
| 归档时间： |
|
| 查看次数： |
1232 次 |
| 最近记录： |