Как установить идеальную полосу прокрутки в angular4 / 5

Question

Я пытался установить perfect-scrollbar (https://www.npmjs.com/package/perfect-scrollbar) в следующем URL-адресе в моем угловом приложении. Но каждый раз, когда он выдает ошибку, как perfect scrollbar не является функцией. Следующие шаги я пробовал, но ничего не получилосьВ моем компоненте после установленной совершенной полосы прокрутки через npm,

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

я добавил эти коды в свой компонент. Но это дает ошибку, как perfectscrollbar не является функцией. Пожалуйста, помогите, если кто-нибудь знает.

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-обозреватель-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>

Обновите (если вы используете Sysem.config.js) в system.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'
      }
    }