Angular - 从属性指令内部获取元素内的文本答案

【问题标题】：Angular - Get text inside an element from inside an Attribute DirectiveAngular - 从属性指令内部获取元素内的文本
【发布时间】：2019-08-12 06:29:33
【问题描述】：

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

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 的值是单击的按钮或链接的文本。如何从元素中获取此信息？

如果可能，我想只在 Typescript 中执行此操作，而不必在模板中添加任何标记。

【问题讨论】：

将 ElementRef 注入构造函数：它将是对被单击的按钮/链接的引用。当然，我希望您意识到并非所有按钮/链接都有文本（它可能只是一张图片，或一大段 HTML）。
谢谢@JBNizet，您能否提供一个完整的示例作为答案，以便我将其标记为正确（如果有效）？
stackblitz.com/edit/…

标签： angular

【解决方案1】：

您只需在指令中注入ElementRef 即可访问宿主DOM 元素。

你可以看到更多关于 Directives 和 ElementRef here:

您在指令的构造函数中使用 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);
  }
}

【讨论】：