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

Question

In my component I have subscribed to html click event using addEventListener passed the callback function. Inside the call back function I used a component variable like this this.someVariable , but I saw the scope of this has been changed and set to the html element object. Here how can I use component variables? Below I have given a sample code. Here inside my handleHtmlClickEvent() function I can't access the this.x variable.

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

Do not touch the DOM directly. It's a bad practice to do it like that.

Use ViewChild decorator or create a directive.

Solution 1 - ViewChild

In your html template assign a template variable to the element that you want to target:

<div #element></div>

In your component:

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);
    }
  }
}

Solution 2 - Directive

@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);
  }
}

In your component template:

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

If you want to manipulate the element or elements use the Render2 service.

Update

For the case described in your comment you can do something like below:

 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);
        ...
      })
    );
  }

While the implementation above will work, I'm not sure how performant it will be if you have dozens or hundreds of links.

Answer 2

Assign scope to your click event

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