如何从@HostListener，angular2指令获取目标元素id

从@HostListener，angular2指令获取目标元素id的方法是通过使用ElementRef和Renderer2。

首先，我们需要在组件的构造函数中注入ElementRef和Renderer2。ElementRef是一个引用，可以访问宿主元素，而Renderer2是一个抽象类，用于操作DOM元素。

接下来，在指令中使用@HostListener装饰器来监听事件。@HostListener装饰器允许我们在宿主元素上监听指定的事件，并在事件触发时执行相应的方法。

在方法中，我们可以使用ElementRef的nativeElement属性来获取目标元素的原生DOM对象。然后，通过原生DOM对象的id属性获取目标元素的id。

下面是一个示例代码：

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  @HostListener('click')
  onClick() {
    const targetElementId = this.elementRef.nativeElement.id;
    console.log('目标元素的id是：', targetElementId);
  }
}

在上面的示例中，我们创建了一个名为MyDirective的指令。通过@HostListener('click')装饰器，我们监听了宿主元素的点击事件。当点击事件触发时，onClick方法会被调用。在onClick方法中，我们通过this.elementRef.nativeElement.id获取目标元素的id，并将其打印到控制台。

这样，我们就可以通过@HostListener，angular2指令获取目标元素id了。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm