Angular 5中如何动态添加ngx-perfect-scrollbar组件？

刚好之前在Angular 5项目里做过类似的需求，给你分享两种可行的实现方式，都是亲测有效的：

前提准备：确保依赖正确安装和导入 #

首先得确保你已经正确安装了适配Angular 5的ngx-perfect-scrollbar版本（Angular 5对应7.x系列，别装最新版，会有兼容问题）：

npm install ngx-perfect-scrollbar@7.2.1 --save

然后在你的模块中导入并配置相关模块：

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

// 可以设置默认的滚动条配置
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    // ...你的其他模块（比如BrowserModule等）
    PerfectScrollbarModule
  ],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    }
  ],
  entryComponents: [PerfectScrollbarComponent] // Angular 5必须！动态创建组件必须加入这个数组
})
export class YourFeatureModule { }

方式一：动态创建PerfectScrollbar组件实例 #

如果需要完全动态生成<perfect-scrollbar>组件并挂载到页面上，用这种方式：

1. 先在宿主组件的模板里准备一个挂载容器：

<!-- 这个容器用来承载动态创建的滚动条组件 -->
<div #scrollContainer></div>

2. 在宿主组件类中实现动态创建逻辑：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit, OnDestroy } from '@angular/core';
import { PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

@Component({
  selector: 'app-your-host-component',
  templateUrl: './your-host.component.html'
})
export class YourHostComponent implements OnInit, OnDestroy {
  @ViewChild('scrollContainer', { read: ViewContainerRef }) scrollContainer: ViewContainerRef;
  private scrollbarComponentRef: any; // 保存组件引用，方便销毁

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    // 1. 创建组件工厂
    const scrollbarFactory = this.resolver.resolveComponentFactory(PerfectScrollbarComponent);
    // 2. 在容器中创建组件实例
    this.scrollbarComponentRef = this.scrollContainer.createComponent(scrollbarFactory);

    // 3. 自定义滚动条配置（可选）
    const customConfig: PerfectScrollbarConfigInterface = {
      suppressScrollY: false,
      wheelPropagation: true,
      minScrollbarLength: 20
    };
    this.scrollbarComponentRef.instance.config = customConfig;

    // 4. 给滚动条组件添加内容（比如长文本或其他元素）
    const contentElement = document.createElement('div');
    contentElement.style.height = '1200px';
    contentElement.style.padding = '20px';
    contentElement.textContent = '这里是滚动条里的测试内容，足够长才会出现滚动效果哦～';
    this.scrollbarComponentRef.instance.elementRef.nativeElement.appendChild(contentElement);

    // 5. 监听滚动事件（可选）
    this.scrollbarComponentRef.instance.scrolled.subscribe((scrollEvent: any) => {
      console.log('滚动位置：', scrollEvent.top, scrollEvent.left);
    });
  }

  ngOnDestroy() {
    // 组件销毁时记得销毁动态创建的滚动条组件，避免内存泄漏
    if (this.scrollbarComponentRef) {
      this.scrollbarComponentRef.destroy();
    }
  }
}

方式二：动态给已有元素添加PerfectScrollbar指令 #

如果只是想给页面上已有的某个元素动态加上滚动条功能，用指令方式更轻量化：

1. 宿主组件模板中准备目标元素：

<!-- 这个元素将被动态添加滚动条指令 -->
<div #targetElement style="height: 300px; border: 1px solid #ccc;"></div>

2. 组件类中实现指令的动态绑定：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy, Injector } from '@angular/core';
import { PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

@Component({
  selector: 'app-your-host-component',
  templateUrl: './your-host.component.html'
})
export class YourHostComponent implements OnInit, OnDestroy {
  @ViewChild('targetElement') targetElement: ElementRef;
  private scrollbarDirective: PerfectScrollbarDirective;

  constructor(private injector: Injector) { }

  ngOnInit() {
    // 1. 创建指令实例并绑定到目标元素
    this.scrollbarDirective = new PerfectScrollbarDirective(this.targetElement, this.injector);

    // 2. 设置滚动条配置
    const customConfig: PerfectScrollbarConfigInterface = {
      suppressScrollX: true,
      theme: 'dark'
    };
    this.scrollbarDirective.config = customConfig;

    // 3. 初始化指令
    this.scrollbarDirective.ngOnInit();

    // 4. 给目标元素添加长内容
    const contentElement = document.createElement('div');
    contentElement.style.height = '800px';
    contentElement.innerHTML = '<p>这是动态添加指令后的滚动内容</p><p>一行又一行...</p>'.repeat(20);
    this.targetElement.nativeElement.appendChild(contentElement);
  }

  ngOnDestroy() {
    // 销毁指令，清理资源
    if (this.scrollbarDirective) {
      this.scrollbarDirective.ngOnDestroy();
    }
  }
}

关键注意事项 #

• 版本匹配：一定要选适配Angular 5的ngx-perfect-scrollbar版本（7.x系列），版本不匹配会导致大量编译或运行时错误。
• 内存泄漏：动态创建的组件或指令一定要在宿主组件销毁时手动销毁，避免内存泄漏。
• entryComponents：Angular 5中动态创建组件必须把组件加入模块的entryComponents数组，Angular 9+之后不需要，但Angular 5必须加，否则会报错。

内容的提问来源于stack exchange，提问作者L. Kvri