Question

我正在使用ngx剪贴板将我的值复制到剪贴板，如果我在主页面中这样做，但是我希望我的模式中的功能既不会抛出任何错误也不会复制任何内容。角5.2.3 NGX剪贴板-9.1.3 以下是代码：

<span>
<img src="../../assets/img/copy-icon.png" ngxClipboard  [cbContent]="myvalue" (click)="copyToClipboard()">
</span>

和我的ts文件：

copyToClipboard(){
  console.log("copyToClipboard")
 }

Answer 1

对于所有收到此错误的人都是答案： TLDR; 创建自己的textarea来保存值以复制并将ngxClipboard挂钩到它。

更长的解释我有一些关于这个插件的问题，似乎在Chrome（v64）中发生了很多。我得到了间歇性的成功。大多数时候'复制到剪贴板'实际上无法复制任何东西，并且也会调用'成功'回调。所以这是两者中最糟糕的......日志中没有任何内容，没有副本，cbOnSuccess调用。大量文字似乎加剧了上述情况。 Safari似乎工作得很好。在Chrome中，我注意到控制台中的“详细”模式中有一些消息是超时错误。

现在我不知道完整的故事，但似乎ngx-clipboard中的'创建文本区'的代码向我（在调试器中）显示了一条消息，例如'Uncaught SyntaxError：意外的输入结束”。

我也使用Bootstrap模式，但我不确定这是否真的导致了很多问题。最后，当我：

时，我能够把一切都搞定我自己做了使用[ngxClipboard] =“textAreaName”格式 HTML模板

<div class="modal fade" id="export-bundle-modal-{{bundleToExport.id}}" tabindex="-1" role="dialog"
     aria-labelledby="modal-content modal-header title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" #exportBundleModalClose data-dismiss="modal">&times;</button>
                <span id="title">Export {{bundleToExport.name}}</span>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <textarea class="form-control text-area" readonly="readonly"
                                  rows="10" #bundleJson style="resize: none">{{bundleWithDependencies | json}}</textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="submit" data-dismiss="modal"
                        [disabled]="!taxonomiesLoaded || !componentTypesLoaded || !configurationsLoaded"
                        [ngxClipboard]="bundleJson" (cbOnSuccess)="copied()">
                    <small *ngIf="!(taxonomiesLoaded && componentTypesLoaded && configurationsLoaded)">
                        LOADING...
                    </small>
                    <small *ngIf="taxonomiesLoaded && componentTypesLoaded && configurationsLoaded">
                        COPY TO CLIPBOARD
                    </small>
                </button>
            </div>
        </div>
    </div>
</div>

注意按钮以及bundleJson如何连接到#bundleJson，而textarea的'value'是管道计算值。在这里进行计算（与点击'复制到剪贴板'时相反也是必要的......实质上，在尝试将其发送到剪贴板之前，请确保textarea中的字符串是正确的。

我们还使用bootstrap.js + jQuery集成而不是原生的Angular bootstrap解决方案（不要问），所以请注意data-dismiss =“modal”也附加到按钮上。单击该按钮时，复制的（）函数以及模态的关闭都会发生..似乎没有任何链接/时序问题。

Answer 2

在模式div中添加#container

<div class="modal fade" id="addAddressSuccessModal" tabindex="-1" role="dialog" aria-hidden="true" #container>

要复制=>

<div  ngxClipboard [cbContent]="createdAddress" [container]="container" ><label class="fbold color-bluey-grey font-10 cursor-pointer">TAP TO COPY</label></div>

文本未在ngx剪贴板中以模态复制

2 个答案: