Question

我试图添加一个＆＃34;剪贴板＆＃34;指令使用this example。

但是我想计算要复制到剪贴板的字符串。

我想将函数的结果传递给我的指令。

目前，它将SourceFile字符串传递给指令。

因为我试图将计算字符串传递给html中的按钮（包含指令）：

"getCopyDetails(supplier)"

导致错误。

代码：

clipboard.directive.ts：

<button [clipboard]="foo, getCopyDetails(supplier)" (clipboardSuccess)="onSuccess()">Copy</button>

search.component.html：

import {Directive,ElementRef,Input,Output,EventEmitter, ViewChild, AfterViewInit} from "@angular/core";
import Clipboard from "clipboard";
import { SupplierSearchComponent } from "../components/suppliersearch.component"

declare var jQuery:any;

@Directive({
  selector: "[clipboard]"
})
export class ClipboardDirective implements AfterViewInit {
  clipboard: Clipboard;

   @Input("clipboard")
   elt:ElementRef;

   text: string;

  @Output()
  clipboardSuccess:EventEmitter<any> = new EventEmitter();

  @Output()
  clipboardError:EventEmitter<any> = new EventEmitter();

  constructor(private eltRef:ElementRef, text) {
    this.text = text
  }

  ngAfterViewInit() {
    this.clipboard = new Clipboard(this.eltRef.nativeElement, {
      target: () => {
        return this.elt;
      }
    } as any);

    this.clipboard.on("success", (e) => {
      this.clipboardSuccess.emit();
    });

    this.clipboard.on("error", (e) => {
      this.clipboardError.emit();
    });
  }

  ngOnDestroy() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }
}

来自search.component.ts的

片段（与上面相同的组件）：

<div  class="website" *ngIf="xxx.website !== undefined"><a #foo href="{{formatUrl(xxx.website)}}" target="_blank" (click)="someclickmethod()">{{xxx.website}}</a></div>
<button [clipboard]="foo, getCopyDetails(supplier)" (clipboardSuccess)="onSuccess()">Copy</button>

另一个程序员的旧HTML代码（他使用"ngx-clipboard": "^5.0.8"插件，这是我用于剪贴板的clipboard.js的包装）已被注释掉，我基本上试图申请它在我上面的html中的指令：

getCopyDetails(supplier: Supplier): string {
    var details: string = "";

    details += xxx.yyy + "\n\n";
    details += xxx.yyy + "\n";
    details += xxx.yyy + "\n";
    details += xxx.yyy + "\n";
    details += xxx.yyy + "\n";

    return details;
}

如何将从获取的字符串传递给我的指令？

从this SO answer判断我可以在HTML中执行getCopyDetails()，然后在我的指令中使用它来复制它。我有点不确定我在我的指令中放置了什么代码来保存该对象。

Answer 1

您只能使用Angular DI注入：@Injectable（）服务，Parents Components或InjectionToken。

所以文字不正确。

constructor(private eltRef:ElementRef, text) {
  this.text = text
}

从html将字符串传递给指令

1 个答案: