堆栈内存溢出
  繁体   English   中英

滑块在Angular4 Web-App的主页组件中不起作用

[英]Slider not working in home component in Angular4 Web-App

 原文  2018-02-22 12:13:06  4   1    angular/ angular2-routing/ angular2-template/ angular2-directives

问题描述

我已经使用angular4创建了Web应用程序。 所有页面均可正确路由。 默认页面是主页。 滑块在主页上运行完美当我转到另一个页面然后进入主页时，在该滑块无法运行之后加载应用程序时。 我已经将所有外部CSS和JS加载到index.html页面中。 在home组件中，仅将内容与滑块一起加载，并将一些用于滑块加载的脚本加载到一晚方法中。 页面刷新或加载时，首页正常工作

第一次滑块在主页上工作，但是使用路由更改页面时滑块不在主页上工作。 有人知道这是什么问题吗？

home.component.ts 

import { CommonScriptComponent } from './../common-script/common-
 script.component';
import { Component, OnInit } from '@angular/core';



@Component({
 selector: 'home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {

 constructor(private commonScriptComponent:CommonScriptComponent) { }

 ngOnInit() {
 this.commonScriptComponent.onLoad();

 }






}

Index.html： 

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Web, Mobile App, CRM, vTiger & ODOO Development Company India | Veepal</title>
<meta name="description" content="Veepal IT Services is Website, Mobile Application for iPhone & Android, Graphics Design, ERP, CRM, vTiger & ODOO Development Company in India.">
<meta name="keywords" content="wordpress development company india, hire wordpress developer india, Hire Codeigniter developer, Codeigniter framework development, Salesforce CRM development, odoo development, odoo customization & Migration, vTiger CRM Development, affordable seo services india, best digital marketing company india, top digital marketing agency india, guaranteed seo services india, cheap seo packages india, offshore web development company, responsive website development india, Custom php development company India, core php development company India, hire php developer india, custom cms development company, offshore cms development company, hire cms developer, hire android app developer, android app development company India, hire ios app developer, ios application development company, iphone application development company, Microsoft Dynamics CRM? Development, Sage CRM module Development, Sugar CRM module Development, Custom coldfusion development india, Hire Magento Developer India, Magento development company india, ecommerce website development india, magento ecommerce development, Hire Laravel Developers, Custom Laravel development india, Hire .net Developers, Custom .net development india, Hire DotNetNuke Developers, Custom DotNetNuke development india, Hire Python Developers, Custom Python development india, Hire MEAN Stack Developer, Mean stack development, Hire Full Stack Developer, full stack development, hire java developer India, custom java development india">
<meta property="twitter:url" content="http://www.veepal.com/">
<meta property="og:url" content="http://www.veepal.com/">
<link rel="canonical" href="http://www.veepal.com/">
<meta name="ROBOTS" content="NOYDIR,NOODP">
<meta name="google-site-verification" content="KpLSxTAPqnxGuygv1GajjqhDjAgL6skG0f47PE7n3Oo">
<meta name="msvalidate.01" content="5D74C2D02269A257714752651F59C85A">
<meta name="alexaVerifyID" content="0zTAiY6o4WrSt4zIb8iTaapixEE">
<meta name="p:domain_verify" content="a4b905b4d212fdffdbe48e61ff04ba06">
<link rel="author" href="https://plus.google.com/+Veepal/posts">
<link rel="publisher" href="https://plus.google.com/102356317964360660690">
<meta property="og:title" content="Web Design &amp; Mobile Development India - Veepal IT services">
<meta property="og:description" content="Veepal IT services creates a unique blend of IT technology solutions by providing web design and development, mobile development and search engine optimisation.">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Veepal IT Services">
<meta property="article:publisher" content="https://www.facebook.com/Software.Development.India">
<meta property="fb:admins" content="146507655407127">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@veepal">
<meta name="twitter:creator" content="@veepal">
<meta property="twitter:title" content="Web Design &amp; Mobile Development India | Veepal.com">
<meta property="twitter:description" content="Veepal IT services creates a unique blend of IT technology solutions by providing web design and development, mobile development and search engine optimisation.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">



<!-- Start Added header for link all css -->

<link href='https://fonts.googleapis.com/css?family=Oswald:400,100,300,500,700%7CLato:400,300,700,900&subset=latin,latin-ext'
    rel='stylesheet' type='text/css'>
<!-- Plugins CSS files -->
<link rel="stylesheet" href="assets/css/assets.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/shortcodes.css">
<!-- REVOLUTION SLIDER STYLES -->
<link rel="stylesheet" href="assets/revolution/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" type="text/css">
<link rel="stylesheet" href="assets/revolution/css/settings.css" type="text/css">
<link rel="stylesheet" href="assets/revolution/css/navigation.css" type="text/css">
<link id="theme_css" rel="stylesheet" href="assets/css/light.css">
<link id="skin_css" rel="stylesheet" href="assets/css/skins/default.css">
<!-- Font icon css -->
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<link href='//cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css' rel='stylesheet'>
<style>
    .icon_shape,
    .videoContainer {
        position: relative;
        overflow: hidden
    }

    .icon_shape {
        border: 1px solid #ccc;
        display: inline-block;
        font-size: 20px;
        height: 40px;
        line-height: 39px;
        margin: 0 5px 5px 0;
        text-align: center;
        width: 40px
    }

    .services {
        background-color: #F8F8F8
    }

    .case-studies a.link.main-bg {
        left: 100px!important
    }

    .portfolio-item .icon-links {
        top: 0!important
    }

    .tp-video-play-button {
        display: none!important
    }

    .videoContainer {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background-attachment: scroll
    }

    .videoContainer .overlay {
        background-image: url(assets/images/video-banner.png);
        background-position: center center;
        height: 100%;
        left: 0;
        opacity: 1.0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2
    }

    .slid-title {
        font-size: 30px!important;
        margin: 0 auto
    }

    .rev_slider .caption1,
    .rev_slider .tp-caption1 {
        margin-top: 45px!important
    }
</style>
 <!-- End Added header for link all css -->

 </head>

  <body>
<!-- <app-root></app-root> -->
<!-- Start Body -->
<div class="page-loader"></div>
<div class="pageWrapper">
    <!-- <?php include 'header_menu_semi_transperent.php'; ?> -->


    <!-- Start Header Menu -->
    <link id="font_css" rel="stylesheet" href="assets/css/lang_font/lang-font.css">

    <!--<div class="head-border"></div>-->

    <!-- Header start -->


    <app-root>

    </app-root>



    <div class="modal fade modal-register t-left" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modal-register">
        <div class="modal-dialog">
            <div class="modal-content">


                <!-- Begin # Login Form -->
                <!-- <?php include 'contact-form.php'; ?> -->
                <!-- Strat Contact Form -->
                <form class="ajax-form1 popup" name="contact" action="assets/php/sendemail.php" id="inquiry-form" method="post">
                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <h2 class="t-center">Inquire Now
                            <small>
                                <i class="fa fa-lock"></i> Safe & Confidential</small>
                        </h2>
                        <hr class="colorgraph">
                        <div class="red" style="text-align: center;"></div>
                        <div class="green" style="color: green;text-align: center;"></div>

                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="first-name" id="first_name" class="form-control ifname" placeholder="First Name">
                                    <lable class="iifname red_cl"></lable>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="last-name" id="last_name" class="form-control ilname" placeholder="Last Name">
                                    <lable class="iilname red_cl"></lable>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="contact-email" id="email" class="form-control iemail" placeholder="Email Address">
                                    <lable class="iiemail red_cl"></lable>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="phone" id="phone" class="form-control iphone" placeholder="Phone">
                                    <lable class="iiphone red_cl"></lable>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <select id="contact-service" name="country" class="form-control icontry">
                                        <option selected="selected">Country</option>
                                        <option>Africa</option>
                                        <option>Argentina</option>
                                        <option>Australia</option>
                                        <option>Austria</option>
                                        <option>Bahamas</option>
                                        <option>Bahrain</option>
                                        <option>Belarus</option>
                                        <option>Belgium</option>
                                        <option>Bolivia</option>
                                        <option>Brazil</option>
                                        <option>Beijing</option>
                                        <option>Canada</option>
                                        <option>China</option>
                                        <option>Colombia</option>
                                        <option>Costa Rica</option>
                                        <option>Croatia (Hrvatska)</option>
                                        <option>Czech Republic</option>
                                        <option>Denmark</option>
                                        <option>Dominican Republic</option>
                                        <option>Egypt</option>
                                        <option>Estonia</option>
                                        <option>Finland</option>
                                        <option>France</option>
                                        <option>Germany</option>
                                        <option>Ghana</option>
                                        <option>Greece</option>
                                        <option>Hong Kong</option>
                                        <option>Hungary</option>
                                        <option>India</option>
                                        <option>Indonesia</option>
                                        <option>Iran</option>
                                        <option>Ireland</option>
                                        <option>Italy</option>
                                        <option>Japan</option>
                                        <option>Kenya</option>
                                        <option>Korea</option>
                                        <option>Kuwait</option>
                                        <option>Malawi</option>
                                        <option>Malaysia</option>
                                        <option>Mexico</option>
                                        <option>Namibia</option>
                                        <option>Netherlands</option>
                                        <option>New Zealand</option>
                                        <option>Nicaragua</option>
                                        <option>Nigeria</option>
                                        <option>Norway</option>
                                        <option>Oman</option>
                                        <option>Pakistan</option>
                                        <option>Panama</option>
                                        <option>Peru</option>
                                        <option>Philippines</option>
                                        <option>Poland</option>
                                        <option>Portugal</option>
                                        <option>Qatar</option>
                                        <option>Romania</option>
                                        <option>Russian Federation</option>
                                        <option>Saudi Arabia</option>
                                        <option>Serbia</option>
                                        <option>Singapore</option>
                                        <option>South Africa</option>
                                        <option>Spain</option>
                                        <option>Sri Lanka</option>
                                        <option>Sudan</option>
                                        <option>Swaziland</option>
                                        <option>Sweden</option>
                                        <option>Switzerland</option>
                                        <option>Thailand</option>
                                        <option>United Arab Emirates</option>
                                        <option>United Kingdom</option>
                                        <option>United States of America</option>
                                        <option>Others</option>
                                    </select>
                                    <lable class="iicontry red_cl"></lable>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input style="margin-top: 0px;" type="text" name="skype-whatsapp" id="skype" class="form-control iskype" placeholder="Skype ID/ Whatsapp No.">
                                    <lable class="iiskype red_cl"></lable>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <textarea id="contact-message" name="contact-message" rows="6" cols="30" class="form-control imessage" placeholder="Message"></textarea>
                            <lable class="iimessage red_cl"></lable>
                        </div>
                        <div class="form-group">
                            <div id="RecaptchaField2"></div>
                            <label class="igg-recaptcha-response msg-error red_cl"></label>
                        </div>
                        <hr class="colorgraph">
                        <div class="modal-footer">
                            <div>
                                <input id="inq_button" type="button" value="Submit" class="btn btn-primary btn-block btn-lg" tabindex="7">
                            </div>
                        </div>
                    </div>
                </form>
                <!-- End Contact Form -->

            </div>
        </div>
    </div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log(document.cookie); var visit = getCookie("cookie"); if (null == visit) { setTimeout(function () { $("#myModal").modal("show") }, 90000), show_contact_captcha(); var expire = new Date, m = 20; expire = new Date(expire.getTime() + 60 * m * 1e3), document.cookie = "cookie=here; expires=" + expire }
        });


        function del_cookie(e) { document.cookie = e + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT;" }

        function getCookie(e) { var n = document.cookie, i = n.indexOf(" " + e + "="); if (-1 == i && (i = n.indexOf(e + "=")), -1 == i) n = null; else { i = n.indexOf("=", i) + 1; var f = n.indexOf(";", i); -1 == f && (f = n.length), n = unescape(n.substring(i, f)) } return n }
    </script>

    <!-- End Header Menu -->


    <!-- End Header Menu -->

    <!-- <?php include 'footer_transperent.php'; ?> -->
    <!-- Start footer  -->


    <!-- Footer end -->
    <!-- Back to top Link -->
    <a id="to-top" href="#">
        <span class="fa fa fa-angle-up"></span>
    </a>
    <!-- Load JS plugins -->
    <script type="text/javascript" src="assets/js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="assets/js/assets.js"></script>
    <!-- SLIDER REVOLUTION  -->
    <script type="text/javascript" src="assets/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/jquery.themepunch.revolution.min.js"></script>
    <!-- SLIDER REVOLUTION 5.0 EXTENSIONS           (Load Extensions only on Local File Systems !  +            The following part can be removed on Server for On Demand Loading) -->
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="assets/revolution/js/extensions/revolution.extension.video.min.js"></script>
    <!-- END SLIDER REVOLUTION 5.0 EXTENSIONS -->
    <!-- <script type="text/javascript">
        var tpj = jQuery, revapi4; tpj(window).load(function () { void 0 == tpj("#rev_slider_4_1").revolution ? revslider_showDoubleJqueryError("#rev_slider_4_1") : revapi4 = tpj("#rev_slider_4_1").show().revolution({ sliderType: "standard", jsFileLocation: "assets/revolution/js/", sliderLayout: "fullscreen", dottedOverlay: "none", delay: 9e3, navigation: { keyboardNavigation: "on", keyboard_direction: "horizontal", mouseScrollNavigation: "off", onHoverStop: "off", touch: { touchenabled: "on", swipe_threshold: 75, swipe_min_touches: 1, swipe_direction: "horizontal", drag_block_vertical: !1 }, arrows: { style: "gyges", enable: !0, hide_onmobile: !1, hide_onleave: !1, tmp: "", left: { h_align: "left", v_align: "center", h_offset: 10, v_offset: 0 }, right: { h_align: "right", v_align: "center", h_offset: 10, v_offset: 0 } }, bullets: { enable: !1, hide_onmobile: !1, style: "gyges", hide_onleave: !1, direction: "horizontal", h_align: "center", v_align: "top", h_offset: 0, v_offset: 20, space: 5, tmp: "" } }, parallax: { type: "mouse", origo: "slidercenter", speed: 2e3, levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50] }, responsiveLevels: [1240, 1024, 778, 480], gridwidth: [1240, 1024, 778, 480], gridheight: [868, 768, 960, 720], lazyType: "none", shadow: 0, spinner: "off", stopLoop: "on", stopAfterLoops: 0, stopAtSlide: 0, shuffle: "off", autoHeight: "off", fullScreenAlignForce: "off", fullScreenOffsetContainer: "", fullScreenOffset: "", disableProgressBar: "on", hideThumbsOnMobile: "off", hideSliderAtLimit: 0, hideCaptionAtLimit: 0, hideAllCaptionAtLilmit: 0, debugMode: !1, fallbacks: { simplifyAll: "off", nextSlideOnWindowFocus: "off", disableFocusListener: !1 } }) }); 
    </script> -->
    <!-- general script file -->
    <!-- <script type="text/javascript" src="assets/js/script.js"></script> -->


    <script>

         //$("#inq_button").click(function (e) { var i = $(".ifname").val(), r = $(".ilname").val(), s = $(".iemail").val(), a = $(".iphone").val(), l = $(".iskype").val(), m = $(".icontry option:selected").val(), t = $("textarea.imessage").val(), n = !0; if ("" == i) $(".iifname").html("This field is required"), $(".ifname").addClass("error"), n = !1; else { var o = /^[a-zA-Z ]*$/; o.test(i) ? ($(".iifname").html(""), $(".ifname").removeClass("error")) : ($(".iifname").html("Please Enter Only Alphabate"), $(".ifname").addClass("error"), n = !1) } if ("" == r) $(".iilname").html("This field is required"), $(".ilname").addClass("error"), n = !1; else { var o = /^[a-zA-Z ]*$/; o.test(r) ? ($(".iilname").html(""), $(".ilname").removeClass("error")) : ($(".iilname").html("Please Enter Only Alphabate"), $(".ilname").addClass("error"), n = !1) } if ("" == s ? ($(".iiemail").html("This field is required"), $(".iemail").addClass("error"), n = !1) : isEmaili(s) ? ($(".iiemail").html(""), $(".iemail").removeClass("error")) : ($(".iiemail").html("Please enter valid email"), $(".iemail").addClass("error"), n = !1), "" == a) $(".iiphone").html("This field is required"), $(".iphone").addClass("error"), n = !1; else { var o = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]*$/im; a.length < 6 ? ($(".iiphone").html("Please enter minimum 6 Digits"), $(".iphone").addClass("error"), n = !1) : o.test(a) ? ($(".iiphone").html(""), $(".iphone").removeClass("error")) : ($(".iiphone").html("Please enter only numbers"), $(".iphone").addClass("error"), n = !1) } "" == l ? ($(".iiskype").html("This field is required"), $(".iskype").addClass("error"), n = !1) : ($(".iiskype").html(""), $(".iskype").removeClass("error")), "Country" == m ? ($(".iicontry").html("This field is required"), $(".icontry").addClass("error"), n = !1) : ($(".iicontry").html(""), $(".icontry").removeClass("error")), "" == t ? ($(".iimessage").html("This field is required"), $(".imessage").addClass("error"), n = !1) : t.length < 20 ? ($(".iimessage").html("Please enter minimum 20 character"), $(".imessage").addClass("error"), n = !1) : ($(".iimessage").html(""), $(".imessage").removeClass("error")), n && $("#inquiry-form").submit() });

        function isEmaili(a) { var i = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return i.test(a) }


    </script>

    <script>
         var CaptchaCallback = function () { $("#RecaptchaField1").length && grecaptcha.render("RecaptchaField1", { sitekey: "6Lc6pDUUAAAAABR_gK7ukk-wlsnOKgB2O4C4jF02" }), $("#RecaptchaField2").length && grecaptcha.render("RecaptchaField2", { sitekey: "6Lc6pDUUAAAAABR_gK7ukk-wlsnOKgB2O4C4jF02" }) };
         var j = 1;
         $(".inq-button").click(function () { $(".red").html(""), $(".green").html(""), $("#inquiry-form")[0].reset(), setTimeout(function () { var e = window.location.pathname, t = "contact-us"; if (-1 !== e.indexOf(t) && hide_contact_captcha(), j) { $("#RecaptchaField2").empty(), removejscssfile("api.js", "js"); var a = document.createElement("script"); a.src = "https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit", a.type = "text/javascript", document.body.parentNode.appendChild(a) } else { $("#RecaptchaField2").empty(), removejscssfile("api.js", "js"); var a = document.createElement("script"); a.src = "https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit", a.type = "text/javascript", document.body.parentNode.appendChild(a) } j = 0 }, 100) });
         $(".close").click(function () { show_contact_captcha() });

        function hide_contact_captcha() { $("#RecaptchaField1").empty(), removejscssfile("api.js", "js") }

        function show_contact_captcha() { $("#RecaptchaField1").empty(), removejscssfile("api.js", "js"); var e = document.createElement("script"); e.src = "https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit", e.type = "text/javascript", document.body.parentNode.appendChild(e) }

        function removejscssfile(e, t) { for (var n = "js" == t ? "script" : "css" == t ? "link" : "none", s = "js" == t ? "src" : "css" == t ? "href" : "none", r = document.getElementsByTagName(n), i = r.length; i >= 0; i--)r[i] && null != r[i].getAttribute(s) && -1 != r[i].getAttribute(s).indexOf(e) && r[i].parentNode.removeChild(r[i]) }
    </script>
    <!------ Start custom code of clients image slider ------>
    <script src="assets/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
    <script type="text/javascript">
         $(function () { var e = $("#carousel"), i = $(window); e.carouFredSel({ align: !1, items: 10, scroll: { items: 1, duration: 2e3, timeoutDuration: 0, easing: "linear", pauseOnHover: "immediate" } }), i.bind("resize.example", function () { var r = i.width(); 990 > r && (r = 990), e.width(3 * r), e.parent().width(r) }).trigger("resize.example") });
    </script>
    <!------ End custom code of clients image slider ------>



    <script type="text/javascript">

        window.$zopim || (function (d, s) {
            var z = $zopim = function (c) { z._.push(c) }, $ = z.s =

                d.createElement(s), e = d.getElementsByTagName(s)[0]; z.set = function (o) {
                    z.set.

                        _.push(o)
                }; z._ = []; z.set._ = []; $.async = !0; $.setAttribute('charset', 'utf-8');

            $.src = '//v2.zopim.com/?2PHjsaWgIJeGDbwArhiFqLeFmURWPxId'; z.t = +new Date; $.

                type = 'text/javascript'; e.parentNode.insertBefore($, e)
        })(document, 'script');

    </script>


    <!-- End footer -->
</div>
<!-- End Body -->

1 个解决方案

解决方案1
 0  2019-04-03 00:33:17

修订滑块不希望删除DOM并重新添加，您应该先运行.revkill（），然后再将其从DOM中删除，然后再运行.revolution（options）。

因此，这里是我简单的工作解决方案（请不要忘记在index.html的body标记末尾包含jquery.themepunch.revolution.min.js和jquery.themepunch.tools.min.js）： 

 import { Component, AfterViewInit, ElementRef, OnDestroy, Inject, PLATFORM_ID } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.scss'] }) export class SliderComponent implements OnDestroy, AfterViewInit { slider: any; constructor( private element: ElementRef, @Inject(PLATFORM_ID) private platformId: Object ) { } ngOnDestroy(): void { // RS's kill switch this.slider.revkill(); } ngAfterViewInit(): void { if (isPlatformBrowser(this.platformId)) { // due to server side rendering check if browser setTimeout(() => { this.slider = (<any>window).$(this.element.nativeElement) .find('.rev_slider') .revolution(this.getSliderOptions()); }, 10); } } getSliderOptions(): any { return { 'delay': 9000, 'gridwidth': [1140,960,720,540], 'gridheight': [600,600,600,600], 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,576], 'parallax': { 'type': 'mouse', 'origo': 'slidecenter', 'speed': 3000, 'levels': [1,2,3,4,5,6,7,12,16,10,50], 'disable_onmobile': 'on' }, 'navigation' : { 'arrows': { 'enable': true, 'hide_under': 767, 'style': 'slider-arrows-style-1 slider-arrows-dark' }, 'bullets': { 'enable': true, 'hide_under': 767, 'style': 'bullets-style-1', 'hide_onleave': false, 'h_align': 'right', 'v_align': 'bottom', 'space': 7, 'v_offset': 75, 'h_offset': 35 } } }; } }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 4 Routing不适用于实时网络应用程序 带有target =“ _ blank”的表单返回的PDF在主屏幕网络应用中不起作用 响应式Angular 2网络应用到移动应用 如何在angular4中将一个应用程序组件导航到另一个应用程序组件？ Angular4应用程序无法在Edge和IE浏览器中运行 如何在我的Angular Web-App中集成Ros服务 web-app项目中Angular 13中的授权问题 Angular4专注于组件 Angular4组件状态 使用带有angular4的光滑块
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM