Angular - 在 ngAfterViewInit 之后重置变量答案

【问题标题】：Angular - Variables being reset after ngAfterViewInitAngular - 在 ngAfterViewInit 之后重置变量
【发布时间】：2020-06-30 07:17:58
【问题描述】：

我有一个问题，在我（成功）在 ngAfterViewInit() 中使用变量后，它们都重置了。

我有几个 @Viewchild 和普通变量，它们正在 ngAfterViewInit 中使用或设置，但是当我在 init 之后添加的几个事件被调用时，这些非常相同的变量仅显示为 undefined

代码（略微简化）：

// Variable declaration
@ViewChild('imagearea') imageArea: ElementRef;

dragBottomRight: HTMLElement;


ngAfterViewInit() {
    this.dragBottomRight = this.imageArea.nativeElement.querySelector('.br');

    this.imageArea.nativeElement.addEventListener("mousedown", this.dragStart);

    // This correctly logs the elements
    console.log(this.imageArea, this.dragBottomRight);
}

dragStart(e: MouseEvent) {
    // This logs: undefined, undefined
    console.log(this.imageArea, this.dragBottomRight);
}

我尝试将变量设置为静态，我的同事似乎可以使用几乎相同的代码结构。

非常感谢任何帮助

【问题讨论】：

如何附加dragStart 事件监听器？

标签： javascript angular typescript

【解决方案1】：

发生这种情况，因为您没有将函数绑定到相同的上下文。

你需要改变：

this.imageArea.nativeElement.addEventListener("mousedown", this.dragStart.bind(this));

为函数保持相同的上下文，或者只使用箭头函数。

【讨论】：

我有另一个看起来像 e => this.myFunction(e) 的函数，它帮助我解决了这个问题。感谢您进一步解释！

【解决方案2】：

您的 Eventlistener 使用了错误的上下文，使用 bind 绑定正确的上下文，或者最好使用角度渲染器来添加您的 eventlistener：

ngAfterViewInit() {
    this.dragBottomRight = this.imageArea.nativeElement.querySelector('.br');
    this.dragStartListener = this.renderer.listen(this.dragBottomRight, 'mousedown', event => this.dragStart(event));
}

要取消绑定监听器，只需调用this.dragStartListener。

注意：您应该使用角度事件绑定来绑定您的侦听器，除非没有其他方法（例如动态创建的元素）。

【讨论】：