Angular 对通用逻辑使用指令
Angular using directive for common logic
我有多个共享共同逻辑的组件。我想将该逻辑移动到一个文件中,这样我就不必将代码复制到每个组件中。我虽然关于使用指令。
这是正确的方法吗?
该逻辑用于构建拖放式图表。 (处理定位等...)
所以我还需要监听 (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>
是的,该指令是正确的方法。
您需要在指令中动态添加事件侦听器。例如,在您的指令构造函数中:
constructor(elementRef: ElementRef, renderer: Renderer2) {
// Listen to mousedown events in the component
renderer.listen(elementRef.nativeElement, 'mousedown', (event) => {
// Do something with 'event'
})
);
我有多个共享共同逻辑的组件。我想将该逻辑移动到一个文件中,这样我就不必将代码复制到每个组件中。我虽然关于使用指令。 这是正确的方法吗?
该逻辑用于构建拖放式图表。 (处理定位等...)
所以我还需要监听 (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>
是的,该指令是正确的方法。 您需要在指令中动态添加事件侦听器。例如,在您的指令构造函数中:
constructor(elementRef: ElementRef, renderer: Renderer2) {
// Listen to mousedown events in the component
renderer.listen(elementRef.nativeElement, 'mousedown', (event) => {
// Do something with 'event'
})
);