Angular-从属性指令内部获取文本

Question

我已经创建了一个角属性指令，可以将其添加到按钮或链接中，并实现某种单击跟踪。请在此处查看一个简化的示例：

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[appTrackClick]'
})
export class TrackClickDirective {
  @Input() trackType = 'ButtonClick';
  @Input() trackName: string;
  @HostListener('click') onClick() {
    this.trackClick()
  }
  constructor() { }
  trackClick() {
    if (!this.trackName) {
      return false;
    }
    // Do the tracking...
  }
}

我希望this.trackName的值是按钮或链接单击的文本。如何从元素中获取此信息？

如果可能的话，我只想在打字稿中执行此操作，而不必在模板中添加更多标记。

Answer 1

您可以将ElementRef注入指令并访问主机DOM元素。

您可以在此处查看有关指令和ElementRef的更多信息：

您使用指令的构造函数中的elementRef注入对主机DOM元素的引用，您应用了指令的元素。

@Directive({
  selector: '[appTrackClick]'
})
export class TrackClickDirective {
  @Input() trackType = 'ButtonClick';
  @Input() trackName: string;
  @HostListener('click') onClick() {
    this.trackClick()
  }
  constructor(private elementRef: ElementRef) { }
  trackClick() {
    if (!this.trackName) {
      return false;
    }
    console.log('Element text: ', this.elementRef.nativeElement.innerText);
  }
}