Javascript 这个关键字在Angular指令中有副作用

我有一个角度指令，它用于其中一个组件。问题是，当我将组件的方法作为指令的参数传递，然后在指令中启动时，

this

关键字引用的不是组件

@Directive({
  selector: "[listenTo]"
})
export class ListenToDirective {
  @Input('listenTo') listenerConfiguration: {event: string, listener: (event?: Event) => any, global?: boolean }[];
  constructor(private elementRef: ElementRef, private renderer: Renderer2, private userInputService: UserInputService)
  {}

  private subscriptions: Subscription[] = [];
  ngAfterViewInit() {
    for (const setup of this.listenerConfiguration) {
      if (setup.global) {
        this.subscriptions.push(
          this.userInputService.subscribe(setup.event).subscribe(setup.listener)
        );
      } else this.renderer.listen(this.elementRef.nativeElement, setup.event, setup.listener);
    }
  }
  ngOnDestroy() {
    for (const sub of this.subscriptions) {
      sub.unsubscribe();
    }
  }
}

listen-to.directive.ts

@Component({
  selector: 'color-hue',
  templateUrl: './color-hue.component.html',
  styleUrls: ['./color-hue.component.scss']
})
export class ColorHueComponent {

  @Output('hue') hueOutput = new EventEmitter<number>();
  @ViewChild('HueContainer') hueContainer: ElementRef<Element>;

  isMoving = false;
  pickerPosition = 0;
  pickerColorHue = 0;

  onContainerMouseDown() {
    console.log("hello");
    this.isMoving = true;
  }

  onContainerMouseMove(event: MouseEvent) {
    if (this.isMoving) {
      console.log(event.clientY);
      const box = this.hueContainer.nativeElement.getBoundingClientRect();
      const beginY = box.y;
      const mouseY = event.clientY;
      this.pickerPosition = Math.max(0, Math.min(box.height, mouseY - beginY));
      this.hueOutput.emit(this.pickerColorHue = Math.min(this.pickerPosition / box.height, 0.999) * 360);
    }
  }
}

@组件({
选择器：'颜色色调'，
templateUrl:'./color-hue.component.html'，
样式URL:['./color-hue.component.scss']
})
导出类ColorHueComponent{
@输出（'hue'）hueOutput=neweventemitter（）；
@ViewChild（'HueContainer'）HueContainer:ElementRef；
isMoving=假；
选择器位置=0；
pickerColorHue=0；
onContainerMouseDown（）{
console.log（“你好”）；
this.isMoving=true；
}
onContainerMouseMove（事件：MouseeEvent）{
如果（此.isMoving）{
console.log（event.clientY）；
const box=this.hueContainer.nativeElement.getBoundingClientRect（）；
const beginY=box.y；
const mouseY=event.clientY；
this.pickerPosition=Math.max（0，Math.min（box.height，mouseY-beginY））；
this.hueOutput.emit（this.pickerColorHue=Math.min（this.pickerPosition/box.height，0.999）*360）；
}
}
}

色相分量

<div class="hue">
  <div class="hue-pointer-container" #HueContainer
       [listenTo]=
         "[
            { event: 'mousemove', listener: onContainerMouseMove, global: true }
         ]"
    >
    <
  </div>
</div>

<

color-hue.component.html

---

所以在指令中，this.isMoving是未定义的。我应该如何正确地使用派生中的component方法

您需要将其包装在箭头函数中，这样您就可以使用

此

在经典函数表达式中，this关键字根据调用函数的上下文绑定到不同的值。而箭头函数在其词法范围内使用此值。这导致了非常不同的行为

这样做应该有效：

onContainerMouseMove() {
    return (event: MouseEvent) => {
      console.log(this.isMoving);
      if (this.isMoving) {
        console.log(event.clientY);
        const box = this.hueContainer.nativeElement.getBoundingClientRect();
        const beginY = box.y;
        const mouseY = event.clientY;
        this.pickerPosition = Math.max(
          0,
          Math.min(box.height, mouseY - beginY)
        );
        this.hueOutput.emit(
          (this.pickerColorHue =
            Math.min(this.pickerPosition / box.height, 0.999) * 360)
        );
      }
    };
  }