如何在Angular 6中实现滚动时动态添加/移除元素类的指令？

嘿，这就帮你把旧的AngularJS指令改成Angular 6的实现！Angular 6的指令写法和AngularJS有不少差异，我们会用Angular的现代API来实现同样的功能，同时更符合框架的最佳实践：

完整的Angular 6指令代码 #

import { Directive, HostListener, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[pbdsHeaderShadow]' // 和原指令保持一致的选择器
})
export class PbdsHeaderShadowDirective {

  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ) { }

  // 监听window的scroll事件，HostListener会自动处理事件绑定和解绑
  @HostListener('window:scroll', [])
  onWindowScroll() {
    // 和原逻辑一致的滚动距离判断
    if (window.pageYOffset > 20) {
      this.renderer.addClass(this.el.nativeElement, 'shadow');
    } else {
      this.renderer.removeClass(this.el.nativeElement, 'shadow');
    }
  }
}

关键变化说明 #

• 指令注册方式：用@Directive装饰器替代AngularJS的directive()方法，需要把这个指令类添加到你的Angular模块（比如ComponentsModule）的declarations数组中完成注册。
• 事件监听优化：使用@HostListener绑定全局window:scroll事件，Angular会自动在指令销毁时移除监听，不用像AngularJS那样手动处理解绑，避免内存泄漏。
• 安全的DOM操作：用Renderer2来添加/移除类，而不是直接操作DOM元素。这是Angular推荐的标准方式，能兼容服务器端渲染（SSR）等特殊场景，也让代码更易测试。

使用方式 #

和原来完全一样，直接在目标元素上添加指令属性即可：

<header pbdsHeaderShadow>你的头部内容</header>

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