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

Question

在我的组件中，我订阅了 html 点击事件，使用addEventListener传递了回调 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. 在这里如何使用组件变量？ 下面我给出了一个示例代码。 在我的handleHtmlClickEvent() function 里面，我无法访问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

不要直接接触 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);
        ...
      })
    );
  }

虽然上面的实现可以工作，但如果你有几十个或几百个链接，我不确定它的性能如何。

Answer 2

将 scope 分配给您的点击事件

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