Javascript 将clipboard.js与Angular 2和Webpack一起使用

我尝试按照此线程在Angular 2上使用剪贴板中的复制文本： 使用此库：

不幸的是，这不起作用，我在控制台上遇到以下错误：

异常：未捕获（承诺中）：错误：./MyComponent类MyComponent-内联模板中的错误：3:12由以下原因引起：剪贴板_1。默认值不是构造函数

首先，我通过npm安装了剪贴板脚本：

npm install clipboard --save 

它在node_模块中显示得很好，然后我将它放在webpack.vendor.js中

var webpack = require('webpack');
module.exports = {
    entry: {
        'vendor': [
            './src/main/webapp/app/vendor',
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/forms',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@ng-bootstrap/ng-bootstrap',
            'angular2-cookie',
            'angular2-infinite-scroll',
            'jquery',
            'clipboard',
            'ng-jhipster',
            'ng2-webstorage',
            'rxjs'
        ]
    },resolve: {
        extensions: ['.ts', '.js'],
        modules: ['node_modules']
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /(vendor\.scss|global\.scss)/,
                loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
                        loader: 'image-webpack-loader',
                        query: {
                            gifsicle: {
                                interlaced: false
                            },
                            optipng: {
                                optimizationLevel: 7
                            }
                        }
                    }
                ]
            },
            {
                // utile pour charger les fichiers .css
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    },
    output: {
        filename: '[name].dll.js',
        path: './target/www',
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]',
            path: './target/www/[name].json'
        })
    ]
};

脚本在目标文件vendor.dll.js中显示良好

然后，我创建了我的指令：

import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { Clipboard } from 'clipboard';

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

  @Input('clipboard')
  elt:ElementRef;

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

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

  constructor(private eltRef:ElementRef) {
  }

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

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

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

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

然后将其导入其他模块：

import { SharedModule } from '../../../../shared';
@NgModule({
    imports: [
        SharedModule
    ],
    declarations: [
        MyComponent
    ],
    providers: [
    ],
    exports: [
            ]
})
export class MyModule { }

要最终在MyComponent中使用它，请与MyModule相对应：

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

@Component({
  selector: 'my-app',
  template: `
   <div>
        <input  #foo/>
        <button [clipboard]="foo" (clipboardSuccess)="onSuccess()">Copy</button>
      </div>
  `
})
export class AppComponent { 
  onSuccess() {
    console.log('on success');
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
复制
`
})
导出类AppComponent{
onSuccess（）{
console.log（'on success'）；
}
}

---

知道我遗漏了什么吗？

在这个问题上，有人构建了一个包装器指令，以便于实现。只需使用ngx剪贴板：简单多了，谢谢！

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

@Component({
  selector: 'my-app',
  template: `
   <div>
        <input  #foo/>
        <button [clipboard]="foo" (clipboardSuccess)="onSuccess()">Copy</button>
      </div>
  `
})
export class AppComponent { 
  onSuccess() {
    console.log('on success');
  }
}