我想将指令中的变量连接到组件

Posted 2023-02-22

【中文标题】我想将指令中的变量连接到组件

【英文标题】：I want to connect a variable from a directive to a component

【发布时间】：2021-10-11 06:42:50

【问题描述】：

每个指令都有一个

// Modules and Components
import  Directive, Input, ElementRef, HostBinding, HostListener  from '@angular/core';
import  DomSanitizer, SafeStyle  from '@angular/platform-browser';

// Directive
import  DraggableDirective  from '../draggable/draggable.directive';

// Interfaces
import  Position  from '../../../../interfaces/draggable-system/move-position';

/**
 * Allows to move the objects.
 */

@Directive(
  selector: '[appMovable]'
)
export class MovableDirective extends DraggableDirective 

  // ********** DECLARATIONS **********//

  // Overview of the Inputs, Outputs and HostBindings
  @Input('appMovable') set movable(movable: boolean) 
    this.enabled = movable;
  

  @HostBinding('class.moving') moving = false;

  // Check the positions
  position: Position =  x: 0, y: 0 ;
  private startPosition: Position;
  private reset = false;

  constructor(
    public element: ElementRef,
    private sanitizer: DomSanitizer) 
    super();
  

  // Use HostBindings and HostListener

  @HostBinding('style.transform') get transform(): SafeStyle 
    return this.sanitizer.bypassSecurityTrustStyle(
      `translateX($this.position.xpx) translateY($this.position.ypx)`
    );
  

  @HostListener('dragStart', ['$event']) onDragStart(event: PointerEvent): void 
    this.moving = true;
    this.startPosition = 
      x: event.clientX - this.position.x,
      y: event.clientY - this.position.y
    ;
  

  @HostListener('dragMove', ['$event']) onDragMove(event: PointerEvent): void 
    this.position = 
      x: event.clientX - this.startPosition.x,
      y: event.clientY - this.startPosition.y,
    ;
  

  @HostListener('dragEnd') onDragEnd(): void 
    this.moving = false;

    if (this.reset) 
      this.position = 
        x: 0,
        y: 0,
      ;
    
  

我需要将此指令中的一个变量绑定到一个组件中。我该怎么做呢？该指令由在鼠标事件期间检测到 x 轴和 y 轴的事件组成。布尔变量可移动应该以某种方式识别。

【问题讨论】：

ERROR TypeError: Cannot read property 'moving' of undefined move 也是一个布尔变量，我需要连接到组件

【参考方案1】：

多种解决方案：

) 使用服务来存储全局变量，该变量将在调用 MovableDirective 时更新。为此，您需要在指令中注入您的服务。

) 或者你可以在你的指令中使用@Output 在你的组件中冒泡移动

export class MovableDirective extends DraggableDirective 
[...]
@Output()
eventToBubbleUp = new EventEmitter<boolean>();
[...]
onDragEnd() 
    [...]
    this.eventToBubbleUp.emit(movable);

你可以这样称呼它

  <div [...] appMovable (eventToBubbleUp)="toDo(movable)"></div > 

【讨论】：

还是不行。如果我制作 ，则作为 div 子元素的按钮消失。

这不是您使用输出方法的方式。 toDo(movable) 方法在您的组件内部，请查看angular.io/guide/… 了解更多信息。

【参考方案2】：

如果你的指令导出为

@Directive(
  selector: '[appMovable]',
  exportAs: 'appMovable'
)

当您使用模板引用变量时，您可以指定“exportAs”并使用它（如果您愿意，您可以调用函数）

<div appMovable #d="appMovable">d.movable</div>