`simplebar`不工作，如何与angular集成

Question

我的appcomponent.ts：

import { Component } from '@angular/core';
import 'simplebar';
import 'simplebar/dist/simplebar.css';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
}

html：

<div class="container" data-simplebar id="content">
  <div class="big-width">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nobis similique, temporibus eaque eum vel adipisci sed harum obcaecati animi praesentium consequatur sint consectetur iure accusantium explicabo voluptate perspiciatis nemo.
  </div>
</div>

希望整合垂直和水平，但没有工作。应该进一步添加什么？

有谁能帮我吗？

Live Demo

Answer 1

1)首先安装npm install simplebar --save

2)在polyfills.ts中添加这个:导入'simplebar；

3)然后在主style.scss文件中添加：@import '~simplebar/dist/simplebar.css'；

4)将data-simplebar属性添加到您希望与此主题一起滚动的元素。