如何在angular4/5中安装完美滚动条

Question

我尝试在我的angular应用程序的以下url中安装perfect-scrollbar(https://www.npmjs.com/package/perfect-scrollbar)。但每次它都会给我一个错误，比如完美的滚动条不是一个函数。我尝试了以下步骤，但都没有结果。通过npm安装perfect scrollbar后，在我的组件中，

import PerfectScrollbar from 'perfect-scrollbar';
const ps = new PerfectScrollbar('#container');

我在我的component.But中添加了这些代码，它给出了错误，比如完美滚动条不是一个函数。如果有人知道请帮忙。

Answer 1

CSS：

/deep/ {
   @import "~perfect-scrollbar/css/perfect-scrollbar";
}

:host {
   div {
    position: relative;
    width: 200px;
    height: 200px;
  }
}

组件：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import PerfectScrollbar from 'perfect-scrollbar';

@Component({
  selector: '...',
  templateUrl: './...',
  styleUrls: ['./...']
})
export class MyComponent AfterViewInit {

  constructor() {}

  @ViewChild('demo') demo: ElementRef;

  ngAfterViewInit() {
    new PerfectScrollbar(this.demo.nativeElement);
  }
}

HTML：

<div #demo>
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
    <p>e</p>
    <p>f</p>
    <p>g</p>
    <p>h</p>
    <p>i</p>
    <p>j</p>
    <p>k</p>
    <p>l</p>
    <p>m</p>
    <p>n</p>
    <p>o</p>
    <p>p</p>
    <p>q</p>
    <p>r</p>
    <p>s</p>
    <p>t</p>
    <p>u</p>
    <p>v</p>
    <p>w</p>
    <p>x</p>
    <p>y</p>
    <p>z</p>
</div>

Answer 2

使用ngx-perfect-scrollbar，您可以像这样将其导入

npm I ngx-perfect-scrollbar

并同时安装依赖项perfect-scrollbar和resize-observer-polyfill

在angular-cli.json中

"scripts":[
"../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"
]

在App.module.ts中

import { PerfectScrollbarModule, PerfectScrollbarConfigInterface,PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
    const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
        suppressScrollX: true //only if u want to supress scrolling in x
      };
    @NgModule({
        imports: [
            PerfectScrollbarModule,
        ],
        providers:[
        {
                provide: PERFECT_SCROLLBAR_CONFIG,
                useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
        }
        ]
    })

在您的html文件中

<perfect-scrollbar class="container">
            <div class="container">

                <div class="content">
<!--the content-->
</div>
            </div>
        </perfect-scrollbar>

在system.config.js中更新(如果使用的是Sysem.config.js)

 map: {
      'ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar',
      'perfect-scrollbar': 'npm:perfect-scrollbar'
    },
    packages: {
      'ngx-perfect-scrollbar': {
          defaultExtension: 'js',
          main: './dist/index.js'
      },
      'perfect-scrollbar': {
          defaultExtension: 'js',
          main:'./index.js'
      }
    }