在angular 7中如何只在一个组件中使用jquery-scrollify？

Question

我正在为angular 7项目使用jquery scrollify。我已经使用这个命令安装了jquery-scrollify

npm i jquery-scrollify

然后在angular.json中添加它的路径

"node_modules/jquery-scrollify/jquery.scrollify.js",

并在我的第一个组件中使用了以下代码

$.scrollify({
    section : ".sectionCommon",
    sectionName : "section-name",
    interstitialSection : "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: false,
    standardScrollElements: false,
    setHeights: true,
    overflowScroll: true,
    updateHash: false,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
});

scrollify开始显示它对该组件的影响，但当它开始显示它对其他组件的影响时，问题就会出现。页面停止滚动。我在其他组件上尝试了下面的代码，但不起作用

$.scrollify.disable();

或

$.scrollify.destroy();

请告诉我在angular 7中添加jquery scrollify的正确方法

Answer 1

首先在组件中导入并声明jquery

import * as jQuery from 'jquery';
declare var jQuery: any;

和ngAfterViewInit()函数使用jquery scrollify插件。

  ngAfterViewInit() {
    jQuery.scrollify({
      section : "section",
      sectionName : "section-name",
      interstitialSection : "",
      easing: "easeOutExpo",
      scrollSpeed: 1100,
      offset : 0,
      scrollbars: true,
      standardScrollElements: "",
      setHeights: true,
      overflowScroll: true,
      updateHash: true,
      touchScroll:true,
      before:function() {},
      after:function() {},
      afterResize:function() {},
      afterRender:function() {}
    });
  }