如何仅在 Angular 7 的一个组件中使用 jquery-scrollify？答案

【问题标题】：How to use jquery-scrollify only in one component in angular 7?如何仅在 Angular 7 的一个组件中使用 jquery-scrollify？
【发布时间】：2019-02-06 12:43:11
【问题描述】：

我在 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 的正确方法

【问题讨论】：

标签： typescript components angular7 jquery-scrollify

【解决方案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() {}
    });
  }

【讨论】：