在NativeScript-angular应用中使用本地设备剪切板

当我刚开始学习nativescript我建立了一个以本地设备剪贴板复制和粘贴，虽然没有什么真正改变剪贴板功能。
我们将看到如何直接复制粘贴在angular，TypeScript建立了一个NativeScript应用程序，
这将是一个非常简单的应用程序，但为了让它易于理解，我们将从头开始。从命令提示符（Windows）或终端（MAC和Linux），执行下列：

tnscreateClipboardProject--ng

cdClipboardProject

tnsplatformaddandroid

tnsplatformaddios

这个项目，将使用nativescript剪贴板插件由Eddy Verbruggen。要安装它，请执行下列操作：

tnspluginaddnativescript-clipboard

现在我们可以着手开发应用程序。
打开项目的app/ app.component.ts文件，包括以下文件的代码：

import{Component}from"@angular/core";

import*asClipboardfrom"nativescript-clipboard";

 

@Component({

    selector:"my-app",

    templateUrl:"app.component.html",

})

exportclassAppComponent{

 

    public stored:string;

 

    publicconstructor(){

        this.stored="";

    }

 

    publiccopy(value:string){

        Clipboard.setText(value).then(()=>{

            console.log("Copied `"+value+"` to the clipboard!");

        });

    }

 

    publicpaste(){

        Clipboard.getText().then((content)=>{

            this.stored=content;

        });

    }

 

}

要打破上面所发生的，我们有两种方法和构造函数方法。我们复制到剪贴板的任何东西都将存储在公共变量中。
其他一切都采取了，官方文件的插件。
打开项目的app/ app.component.html文件，包括HTML标记：

<ActionBartitle="{N} Clipboard Example"></ActionBar>

<StackLayoutclass="p-20 form">

    <StackLayoutclass="input-field">

        <TextField#inputclass="input input-border"></TextField>

    </StackLayout>

    <Buttontext="COPY"(tap)="copy(input.text)"class="btn btn-primary btn-active"></Button>

    <Buttontext="PASTE"(tap)="paste()"class="btn btn-primary btn-active"></Button>

    <Labeltext="Clipboard Text: {{ stored }}"></Label>

</StackLayout>

上面非常基本的UI有一个输入字段，它使用角模板，一个按钮来复制文本，一个按钮将文本粘贴到标签中。这很简单，但证明了我们的观点。

结论

虽然这个应用例子很简单，这是一个完美的例子，使用剪贴板的功能在一个nativescript Android和iOS应用了angular。剪贴板可能是有用的，如果您需要复制密码，或任何其他数据存储在您的应用程序。