在Angular中如何利用指令封装和重用DOM操作逻辑

在Angular中，可以通过自定义指令来封装和重用DOM操作逻辑。指令是一个带有@Directive装饰器的类，通过@HostListener装饰器可以监听DOM事件，通过Renderer2类可以进行DOM操作。

下面是一个简单的例子，演示如何创建一个自定义指令来实现一个简单的点击按钮后改变文本颜色的功能：

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

@Directive({
  selector: '[changeColorOnClick]'
})
export class ChangeColorOnClickDirective {

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

  @HostListener('click') onClick() {
    this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
  }
}

在上面的例子中，我们创建了一个名为ChangeColorOnClickDirective的指令，通过@Directive装饰器指定了选择器为changeColorOnClick，然后在构造函数中注入了ElementRef和Renderer2服务。在onClick方法中使用Renderer2的setStyle方法来改变元素的文字颜色为红色。

然后在需要使用该指令的组件模板中添加指令选择器即可：

<button changeColorOnClick>Click me!</button>

这样当用户点击按钮时，文字颜色就会变为红色。通过自定义指令，可以方便地封装和重用DOM操作逻辑，使代码更加模块化和易于维护。