活字体滑らかなスクロールバーのパッケージ

Question

おはようコミュニティ、

私は角度CLIのプロジェクトを持っていると私はNPMパッケージsmooth-scrollbarを初期化しようとしていますが、私は、私はここで間違ってやっているものをundestandしていないようです。

これは私も

<div class="main-container scroll-content" id="mainContainer" data-scrollbar> 
    <router-outlet></router-outlet> 
</div> 

を試してみましたが、私の.main-containerスタイルが

.main-container, #mainContainer { 
    width: 100%; 
    height: calc(100% - 64px); 
    overflow-x: hidden; 
    overflow-y: auto; 
    position: fixed; 
    bottom: 0; 
} 

と私のapp.component.ts

である私の app.component.html

... 
<scrollbar> 
    <div class="main-container scroll-content" id="mainContainer" data-scrollbar> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="scrollbar-track scrollbar-track-y"> 
     <div class="scrollbar-thumb scrollbar-thumb-y"></div> 
    </div> 
</scrollbar> 
... 

です210

import { Component, EventEmitter, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 
import Scrollbar from 'smooth-scrollbar'; 
... 
constructor(@Inject(DOCUMENT) private document: Document) { 
    Scrollbar.init(document.getElementById('#mainContainer')); 
} 

は、私はまた、すべての私の試みで

Scrollbar.init(document.querySelector('#mainContainer')); 

と

Scrollbar.init(<HTMLElement>document.querySelector('#mainContainer')); 

を試してみました私は、次のTypeError

ERROR TypeError: expect element to be DOM Element, but got null 
at Function.SmoothScrollbar.init (index.js:28) 
... 

を受け付けております私はここで何をしないのですか？は、私は今、私は別の問題に直面しています（DOMロードする前に初期化するために私の愚かな部分）ngAfterViewInit代わりconstructorの中にスクロールバーを初期化することによって、現在の問題を解決：overscroll効果が勝っEDITが

ご回答

いただきありがとうございます可能にする！

立体配置のは、次のように

ngAfterViewInit() { 
const scrollbar = Scrollbar.init(document.getElementById('mainContainer'), { 
    plugins: { 
    overscroll: true 
    } 
}); 
scrollbar.updatePluginOptions('overscroll', { 
    effect: 'glow', 
    damping: 0.14, 
    maxOverscroll: 300, 
    glowColor: '#222a2d' 
}); 

}

Answer 1

コンポーネントテンプレートは、コンストラクタにまだ存在しません。角度をつけるまで待たなければなりません。 initロジックをのいずれかに移動します。たとえば、

constructor(@Inject(DOCUMENT) private document: Document) { 
} 

ngAfterViewInit() { 
    Scrollbar.init(document.getElementById('#mainContainer')); 
}