如何在 angular 的回调函数中访问组件 class 变量？

Question

在我的组件中，我订阅了 html 点击事件，使用 addEventListener 传递了回调函数。在回调函数中，我使用了一个像这样的组件变量 this.someVariable ，但我看到它的范围已更改并设置为 html 元素对象。在这里我如何使用组件变量？下面我给出了示例代码。在我的 handleHtmlClickEvent() 函数中，我无法访问 this.x 变量。

export class SomeComponent implements OnInit, AfterViewInit{
   x = 'Hello';
   constructor(private elementRef: ElementRef){}
   ngOnInit(){
   }
   ngAfterViewInit(){
     const element = this.elementRef.nativeElement.getByElementId('123');
     element.addEventListener('click', this.handleHtmlClickEvent)
   }
   handleHtmlClickEvent(){
     console.log(this.x);
   }
}

Answer 1

为您的点击事件分配范围

element.addEventListener('click', this.handleHtmlClickEvent.bind(this))

Answer 2

不要直接触摸DOM。这样做是一种不好的做法。

使用 ViewChild 装饰器或创建指令。

解决方案 1 - ViewChild

在您的 html 模板中，将模板变量分配给您要定位的元素：

<div #element></div>

在你的组件中：

export class SomeComponent implements OnInit, AfterViewInit{
   x = 'Hello';
   @ViewChild('element') element: ElementRef<HTMLDivElement>;

   // use @HostListener decorator to attach your listener
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
    if (event.target === this.element.nativeElement) {
      console.log(this.x);
    }
  }
}

解决方案 2 - 指令

@Directive({
  selector: '[appSomeDirective]'
})
export class SomeDirective {
   // use the Input decorator to display the message
   @Input() message: string;

   constructor(private elementRef: ElementRef){}

   @HostListener('click', ["$event"])
   onClick(event: MouseEvent) {
     console.log(this.message);
  }
}

在您的组件模板中：

<div appSomeDirective [message]="x"></div>

如果您想操作一个或多个元素，请使用 Render2 服务。

更新

对于您评论中描述的情况，您可以执行如下操作：

 x = 'Hello';
 @ViewChild('element') element: ElementRef<HTMLDivElement>;

 constructor(private renderer: Renderer2) {}

 ngAfterViewInit() {
    const links = this.element.nativeElement.querySelectorAll('a');

    links.forEach(link =>
      // use the Renderer2 service to start an event listener 
      this.renderer.listen(link, 'click', (event: MouseEvent) => {
        console.log(this.x);
        ...
      })
    );
  }

虽然上面的实现会起作用，但我不确定如果您有几十个或数百个链接，它的性能会如何。

如何在 angular 的回调函数中访问组件 class 变量？

How to access component class variables inside a callback function in angular?

javascript

dom-events

typescript

angular