完美的滚动条在 Angular 中不起作用

Question

我正在尝试使用以下库向我的 Angular 应用程序添加样式滚动条：https : //github.com/zefoy/ngx-perfect-scrollbar

我遵循该链接中的文档并将导入添加到我的 app.module.ts 文件中，但是在尝试使用它时我不断收到错误消息。

我还尝试将 PerfectScrollbarModule 和 PerfectScrollbarConfigInterface 导入到我正在使用它的组件中，但仍然没有运气。

我尝试了以下所有 HTML，但它们导致了相应的错误消息。我错过了什么？顺便说一下，我使用的是最新版本的 Angular。

<perfect-scrollbar class="container" [config]="config">
  <div class="content">Scrollable content</div>
</perfect-scrollbar>

无法绑定到 'config'，因为它不是 'perfect-scrollbar' 的已知属性。

<perfect-scrollbar class="container">
  <div class="content">Scrollable content</div>
</perfect-scrollbar>

“完美滚动条”不是已知元素：

<div [perfect-scrollbar]="config">
    ...
</div

无法绑定到“完美滚动条”，因为它不是“div”的已知属性

更新：

我添加ngx-perfect-scrollbar': 'npm:ngx-perfect-scrollbar'到地图对象的是我的 systemjs 文件，并将以下内容添加到包对象中：

'ngx-perfect-scrollbar': {
    main: 'bundles/ngx-perfect-scrollbar.umd.js',
    defaultExtension: 'js'
  }

这是我的app.module.ts文件的相关部分：

import { PerfectScrollbarModule }          from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

export const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({ 
    imports: [        
        ...
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ],
    ...
})

Answer 1

对于其他人正在寻找答案，问题是因为指令属性已从 更改[perfect-scrollbar]为[perfectScrollbar]。

Answer 2

如果您想要使用完美滚动条的组件依赖于另一个模块app.module（例如header.module......），您还应该PerfectScrollbarModule在此子模块中导入。您可以按照与在app.module.

Answer 3

首先，你安装正确了吗？我的意思是你运行了这个命令吗？npm install ngx-perfect-scrollbar --save-dev，如果没有，那么您应该首先执行此操作才能使用该库。