角样式绑定onMouseMove

Question

我是ng7的新手，我正在尝试创建组件，它将跟随鼠标。所以我需要做的是绑定div的样式。我的html是：

<div class="follower" [ngStyle]="{'left': leftPos, 'top': topPos}"></div>

和js：

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-follower',
  templateUrl: './follower.component.html',
  styleUrls: ['./follower.component.scss']
})
export class FollowerComponent implements OnInit {
  @HostListener('document:mousemove', ['$event'])

  topPos: string;
  leftPos: string;

  onMouseMove(e) {
      this.topPos = e.clientY + 'px';
      this.leftPos = e.clientX + 'px';
  }

  constructor() { }

  ngOnInit() {
  }

}

由于某些原因，它无法正确地在控制台中打印一些奇怪的错误。

错误TypeError: jit_nodeValue_3(.).topPos不是函数

怎么了？

Answer 1

HostListener装饰符后面必须跟着事件处理程序方法。若要防止错误，请移动topPos和leftPos的声明，以便onMouseMove立即跟随装饰器：

topPos: string;
leftPos: string;

@HostListener('document:mousemove', ['$event'])
onMouseMove(e) {
  this.topPos = e.clientY + 'px';
  this.leftPos = e.clientX + 'px';
}

有关演示，请参见这一堆闪电战。