使用带有Angular 2和Webpack的clipboard.js

Question

我尝试按照此主题在Angular 2上的剪贴板中使用复制文本： How do I copy to clipboard in Angular 2 Typescript?使用此库：https://clipboardjs.com/

不幸的是，这不起作用，我在控制台上收到此错误：

  

EXCEPTION：未捕获（在承诺中）：错误：./MyComponent类中的错误MyComponent - 内联模板：3：12导致：clipboard_1.default不是构造函数

起初我通过npm安装了剪贴板脚本：

npm install clipboard --save 

它似乎在node_modules中，然后我把它放在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 { ClipboardDirective } from './directive/clipboard.directive';
@NgModule({
    imports: [
    ],
    declarations: [
        ClipboardDirective
    ],
    providers: [
    ],
    exports: [
        ClipboardDirective
    ]

})
export class SharedModule {}

然后在另一个模块中导入它：

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

最后在与MyModule对应的MyComponent中使用它：

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');
  }
}

知道我错过了什么？