Angular 10：我正在尝试从一个跨度中复制字符串数据，而不使用 HTML 中的 @Input 括号

Question

我正在尝试从跨度、输入、按钮等中复制元素，而输入周围没有 []，就像这样 <button copyOnClick>testing the data</button> 应该复制 测试数据.当我在 copyOnClick <button [copyOnClick]="index + 1"> {{index + 1}}</button> 周围有括号时它确实有效，它复制 1 但我想在按钮内获取文本因此，如果我将它也添加到跨度或输入中，它可能会更加动态。

这是我的指令

@Directive({
  selector: '[copyOnClick]'
})
export class CopyOnClickDirective {
  @Input('copyOnClick')
  public url: any;

  @Output('copied')
  public copied: EventEmitter<string> = new EventEmitter<string>();

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent): void {
    event.preventDefault();
    if (!this.url) return;

    let listener = (e: ClipboardEvent) => {
      let clipboard = e.clipboardData || window['clipboardData'];
      clipboard.setData('text', this.url.toString());
      e.preventDefault();

      this.copied.emit(this.url);
    };

    document.addEventListener('copy', listener, false);
    document.execCommand('copy');
    document.removeEventListener('copy', listener, false);
    console.log(this.url);
  }
}

这是 HTML 代码。

<button class="btn-numbers btn font-weight-medium btn-light" [copyOnClick]="index + 1">{{ index + 1 }}</button>

Answer 1

您要做的是将宿主元素 ref 注入指令构造函数 (private readonly _elementRef: ElementRef) 并使用它来获取实际内容。

然后您可以使用 this._elementRef.nativeElement 访问内部 html（对于跨度）或值（对于文本输入）。

Angular 10：我正在尝试从一个跨度中复制字符串数据，而不使用 HTML 中的 @Input 括号

Angular 10: I am trying to copy the string data from a span with out using the @Input brackets in the HTML

javascript

html

angular

typescript

angular-directive