如何在Angular 4中导航到主页更改屏幕大小？

I'm building a website with angular 4 and asp.net.

我正在用angular 4和asp.net构建一个网站。

When you enter the website, you can see the home page fit to mobile size (which is what I want).

当您进入网站时，您可以看到适合移动尺寸的主页（这就是我想要的）。

then when I navigate to the orders page, it looks like this:

然后当我导航到订单页面时，它看起来像这样：

orders page

订单页面

but when I navigate back to the home page again from the orders page, it changes the screen and does not fit to mobile at all.

但是当我从订单页面再次导航回主页时，它会更改屏幕，根本不适合移动设备。

Code:

码：

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-->

Part of my router module:

我的路由器模块的一部分：

  RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'order', component: OrderComponent },
        { path: '**', redirectTo: 'home' }
    ])

slider call in _layour.cshtml

在_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>

1 个解决方案

#1

The main problem here is that you are mixing Jquery plugins with Angular without a wrapper.

这里的主要问题是你在没有包装器的情况下将Jquery插件与Angular混合在一起。

The first time the app is loaded it works because the onready is the last srcipt to run (remember that the browser executes the tags synchronously from top to bottom).

第一次加载应用程序时它起作用，因为onready是最后一个运行的srcipt（请记住浏览器从上到下同步执行标记）。

As soon as you visit the orders page Angular modifies the DOM and the slider cease to exist.

一旦您访问订单页面，Angular就会修改DOM并且滑块不再存在。

When you browse back to the homepage Angular generates the corresponding HTML (inc. the slider) but it never executes the script that configures the slider.

当您浏览回主页时，Angular会生成相应的HTML（包括滑块），但它永远不会执行配置滑块的脚本。

There are two possible solutions here, the one that will fix this quickly but it is technically wrong, and the one that is the right way to do it.

这里有两种可能的解决方案，一种能够快速解决这个问题的解决方案，但技术上是错误的，而且是正确的解决方案。

Quick but wrong: Copy all inside jQuery(document).ready(function () { }); to a new function named, for example, sliderSetup(). Implement Angular ngOnReady method in the Home Component and invoke sliderSetup() from there.

快速但错误：复制jQuery（文档）.ready（function（）{}）;以一个名为的新函数，例如，sliderSetup（）。在Home Component中实现Angular ngOnReady方法并从那里调用sliderSetup（）。

Angular way: Search for an Angular implementation of a slider. For example:

Angular方式：搜索滑块的Angular实现。例如：

https://www.npmjs.com/package/angular2-carousel-simple
https://www.npmjs.com/package/angular2-carousel-simple
https://www.npmjs.com/package/ng2-owl-carousel
https://www.npmjs.com/package/ng2-owl-carousel
https://www.npmjs.com/package/angular2-useful-swiper
https://www.npmjs.com/package/angular2-useful-swiper

DISCLAIMER: Haven't tested any of them, just Googled for some example for you.

免责声明：没有测试过任何一个，只是用谷歌搜索一些例子给你。

Let me know how it goes.

让我知道事情的后续。

#1