滑块不在Angular4 Web-App中的主组件中工作

问题描述 投票:0回答:1

我使用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 -->

angular angular2-routing angular2-template angular2-directives
1个回答
0
投票

Rev滑块不喜欢删除DOM并再次添加,您应该在再次添加之前运行.revkill(),然后再从DOM和.revolution(选项)中删除它。

所以我的简单工作解决方案在这里(不要忘记在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
        }
      }
    };
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.