在Angular组件中配置Revolution Slider

Question

我使用从Theme forest购买的模板作为角度应用程序的基础。

我想将这些模板部件组成组件。

努力让Revolution滑块工作。

在模板html中 - 它连接文档就绪事件上的滑块：

    <script>
  jQuery(document).ready(function() {

    jQuery("#rev_slider_280_1").show().revolution({
      sliderType: "hero",
      jsFileLocation: "revo-slider/js/",
      sliderLayout: "fullscreen",
      dottedOverlay: "none",
      delay: 9000,
      /*navigation: {},*/
      responsiveLevels: [1240, 1024, 778, 480],
      visibilityLevels: [1240, 1024, 778, 480],
      gridwidth: [1240, 1024, 778, 480],
      gridheight: [868, 768, 960, 720],
      lazyType: "none",
      parallax: {
        type: "off",
        origo: "slidercenter",
        speed: 1000,
        levels: [0],
        type: "scroll",
        disable_onmobile: "on"
      },
      shadow: 0,
      spinner: "spinner2",
      autoHeight: "off",
      fullScreenAutoWidth: "off",
      fullScreenAlignForce: "off",
      fullScreenOffsetContainer: "",
      fullScreenOffset: "",
      disableProgressBar: "on",
      hideThumbsOnMobile: "off",
      hideSliderAtLimit: 0,
      hideCaptionAtLimit: 0,
      hideAllCaptionAtLilmit: 0,
      debugMode: false,
      fallbacks: {
        simplifyAll: "off",
        disableFocusListener: false,
      }
    });

  }); /*ready*/
</script>

遵循Angular中的类似方法将使用OnInit生命周期钩子。

我引用了jQuery并捕获了DOM元素。

问题是我不知道如何获得对Revolution库的引用。

我用这段代码得到编译时错误（Jquery上不存在属性'Revolution'：

import {Component, ElementRef, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'pm-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pm';

  constructor(private element: ElementRef) {}

  ngOnInit(): void {

$(this.element.nativeElement).show().revolution({
  sliderType: "hero",
  jsFileLocation: "revo-slider/js/",
  sliderLayout: "fullscreen",
  dottedOverlay: "none",
  delay: 9000,
  /*navigation: {},*/
  responsiveLevels: [1240, 1024, 778, 480],
  visibilityLevels: [1240, 1024, 778, 480],
  gridwidth: [1240, 1024, 778, 480],
  gridheight: [868, 768, 960, 720],
  lazyType: "none",
  parallax: {
    type: "off",
    origo: "slidercenter",
    speed: 1000,
    levels: [0],
    type: "scroll",
    disable_onmobile: "on"
  },
  shadow: 0,
  spinner: "spinner2",
  autoHeight: "off",
  fullScreenAutoWidth: "off",
  fullScreenAlignForce: "off",
  fullScreenOffsetContainer: "",
  fullScreenOffset: "",
  disableProgressBar: "on",
  hideThumbsOnMobile: "off",
  hideSliderAtLimit: 0,
  hideCaptionAtLimit: 0,
  hideAllCaptionAtLilmit: 0,
  debugMode: false,
  fallbacks: {
    simplifyAll: "off",
    disableFocusListener: false,
      }
    });
  }
}

Answer 1

请使用AfterViewInit钩子代替OnInit，如下所示：

    import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
   selector: 'pm-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'pm';

constructor(private element: ElementRef) {}

ngAfterViewInit(): void {
   $(this.element.nativeElement).show().revolution({
      sliderType: "hero",
      jsFileLocation: "revo-slider/js/",
      sliderLayout: "fullscreen",
      dottedOverlay: "none",
      delay: 9000,
      /*navigation: {},*/
      responsiveLevels: [1240, 1024, 778, 480],
      visibilityLevels: [1240, 1024, 778, 480],
      gridwidth: [1240, 1024, 778, 480],
      gridheight: [868, 768, 960, 720],
      lazyType: "none",
      parallax: {
         type: "off",
         origo: "slidercenter",
         speed: 1000,
         levels: [0],
         type: "scroll",
         disable_onmobile: "on"
      },
      shadow: 0,
      spinner: "spinner2",
      autoHeight: "off",
      fullScreenAutoWidth: "off",
      fullScreenAlignForce: "off",
      fullScreenOffsetContainer: "",
      fullScreenOffset: "",
      disableProgressBar: "on",
      hideThumbsOnMobile: "off",
      hideSliderAtLimit: 0,
      hideCaptionAtLimit: 0,
      hideAllCaptionAtLilmit: 0,
      debugMode: false,
      fallbacks: {
         simplifyAll: "off",
         disableFocusListener: false,
      }
    });
  }
}