在Angular中如何为D3库生成的元素添加自定义指令

Angular的指令仅对Angular编译流程内生成的DOM生效，你通过D3动态生成的DOM属于Angular上下文外的元素，直接通过.attr('perfectScrollBar', '')添加指令属性不会被Angular编译器识别，因此指令逻辑不会执行。

你需要手动调用Angular的编译API，将D3生成的DOM元素与Angular上下文绑定，触发指令初始化。以下是Angular 14+版本的完整实现示例：

import { Component, ElementRef, ViewChild, AfterViewInit, Injector, createComponent, OnDestroy } from '@angular/core';
import { PerfectScrollbarDirective, PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import * as d3 from 'd3';

const DEFAULT_SCROLL_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: false,
  wheelSpeed: 2
};

@Component({
  selector: 'app-d3-scroll-container',
  template: `<div #svgWrap></div>`,
  standalone: true,
  imports: [PerfectScrollbarDirective],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_SCROLL_CONFIG
    }
  ]
})
export class D3ScrollContainerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('svgWrap') svgWrap!: ElementRef<HTMLElement>;
  private psDirectiveRef?: any;

  constructor(private injector: Injector) {}

  ngAfterViewInit(): void {
    // 1. D3生成目标DOM元素
    const svg = d3.select(this.svgWrap.nativeElement)
      .append('svg')
      .attr('width', '100%')
      .attr('height', 500)
      .style('overflow', 'hidden');

    const svgDomNode = svg.node() as HTMLElement;

    // 2. 手动编译绑定perfectScrollbar指令
    this.psDirectiveRef = createComponent(PerfectScrollbarDirective, {
      hostElement: svgDomNode,
      injector: this.injector
    });
    // 触发指令初始化检测
    this.psDirectiveRef.changeDetectorRef.detectChanges();

    // 3. 后续D3业务逻辑正常编写即可
    svg.append('g')
      .attr('transform', 'translate(30, 30)')
      .append('rect')
      .attr('width', 1200)
      .attr('height', 1200)
      .attr('fill', '#e0f2fe');
  }

  ngOnDestroy(): void {
    // 手动销毁指令避免内存泄漏
    this.psDirectiveRef?.destroy();
  }
}

如果你使用的是Angular 13及以下版本，可以改用ComponentFactoryResolver实现编译逻辑：

// 构造函数中注入ComponentFactoryResolver
constructor(
  private resolver: ComponentFactoryResolver,
  private vcr: ViewContainerRef
) {}

// 替换编译逻辑部分
const factory = this.resolver.resolveComponentFactory(PerfectScrollbarDirective);
this.psDirectiveRef = this.vcr.createComponent(factory, 0, this.vcr.injector, [[svgDomNode]]);
this.psDirectiveRef.changeDetectorRef.detectChanges();

• 要确保PerfectScrollbarModule或者对应的指令已经在你当前组件的imports（独立组件）、所属模块的imports中正确引入
• 如果需要动态修改滚动条配置，可以直接修改指令实例的属性：this.psDirectiveRef.instance.config.suppressScrollX = true，修改后调用this.psDirectiveRef.instance.update()更新即可
• 所有动态创建的指令/组件都需要在组件销毁时手动调用destroy方法，避免内存泄漏

内容的提问来源于stack exchange，提问作者Alexey Kurakin