Angular 对通用逻辑使用指令

Question

我有多个共享共同逻辑的组件。我想将该逻辑移动到一个文件中，这样我就不必将代码复制到每个组件中。我虽然关于使用指令。这是正确的方法吗？

该逻辑用于构建拖放式图表。（处理定位等...）所以我还需要监听 (onmousedown) 和 (onmouseup) 事件，然后调用适当的处理程序，这些处理程序也位于指令中。

因此组件的模板将如下所示：

<div class="entity-wrapper" (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)">
    <span>{{entityData.name}}</span>
</div>

其中 onMouseDown() 和 onMouseUp() 是在指令中找到的方法。

该指令看起来像这样：

@Directive({
  selector: '[appDiagramElement]'
})
export class DiagramElementDirective {

  @Input() position: Vector2;

  constructor(private _elRef: ElementRef) { }

  onMouseDown($e: MouseEvent){
    ...
  }

  onMouseUp($e: MouseEvent){
    ...
  }

  @HostListener('document:mousemove', ['$event'])
  onMouseMove($e: MouseEvent){
    ...
  }
}

当我尝试这样做时。它不起作用，因为该组件没有方法 onMouseDown() 和 onMouseUp()。所以我想，我可能想在组件本身中创建这些方法，然后在指令的方法中调用正确的实现。

我该怎么做或者有更好的方法吗？

编辑：添加了模板代码，我在其中实例化组件：

<div #wrapper class="diagram-wrapper">
  <app-entity [entityData]="testEntity" class="diagram-element" appDiagramElement [position]="testEntity"></app-entity>
</div>

Answer 1

是的，该指令是正确的方法。您需要在指令中动态添加事件侦听器。例如，在您的指令构造函数中：

constructor(elementRef: ElementRef, renderer: Renderer2) {
    // Listen to mousedown events in the component
    renderer.listen(elementRef.nativeElement, 'mousedown', (event) => {
      // Do something with 'event'
    })
);

Angular 对通用逻辑使用指令

Angular using directive for common logic

angular

dry

angular-directive

angular-components