Как перейти на размер экрана для изменения главной страницы в Angular 4?

Я создаю сайт с angular 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>

Ответы

Ответ 1

Основная проблема заключается в том, что вы смешиваете плагины JQuery с Angular без оболочки.

В первый раз, когда приложение загружается, оно работает, потому что onready - последний запуск srcipt (помните, что браузер выполняет теги синхронно сверху вниз).

Как только вы перейдете на страницу заказов Angular, измените DOM, и ползунок перестанет существовать.

При переходе на домашнюю страницу Angular генерируется соответствующий HTML (включая ползунок), но он никогда не выполняет script, который настраивает слайдер.

Здесь есть два возможных решения: тот, который будет исправлять это быстро, но это технически неправильно, и тот, который является правильным способом сделать это.

Быстро, но неправильно: Скопируйте все внутри jQuery (document).ready(function() {}); к новой функции, названной, например, sliderSetup(). Внесите Angular ngOnReady метод в Home Component и вызовите sliderSetup() оттуда.

Angular способ: Найдите реализацию слайдера Angular. Например:

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Не проверял ни одного из них, просто Google для примера для вас.

Сообщите мне, как это происходит.