Angular 角度6+；Popper.js（不带jQuery）

我正在尝试将Popper.js设置为使用angular 5，而无需引导或jquery。我试着遵循这一点，但这并不完全是角度应用的a到B点描述

我通过npm安装了Popper.js

npm install popper.js --save

然后，我选择将esm模块捆绑到我的angular cli脚本中

"scripts": [
                   (...)
        "../node_modules/popper.js/dist/esm/popper.js"
      ],

因为esm/popper.js导出popper变量如下

var Popper = function () {

我想我应该像这样在我的角度模板中声明popper变量

declare var Popper;

唉，我运气不好

---

有人对如何正确实现这一点有想法吗？

首先，我用npm安装了Popper.js

npm install popper.js --save

然后我在angular-cli.json中将Popper定义为一个外部脚本

angular cli.json

"scripts": [
                   (...)
        "../node_modules/popper.js/dist/esm/popper.min.js"
      ],

然后我将波普尔导入到角度组件中，以正确的角度方式初始化它，我们就可以开始了

组件

import Popper, {PopperOptions} from 'popper.js';

@Component({
               selector: 'x',
               templateUrl: './x',
               styleUrls: ['./x']
           })
export class X_Component implements OnInit {
    @Input() popperOptions: PopperOptions = {};
    @Input() popperTarget: string | Element;
    private popper: Popper;

    constructor(private el: ElementRef) { }

    ngOnInit() {
        this.popper = new Popper(
            this.getTargetNode(),
            this.el.nativeElement,
            this.popperOptions
        );
    }

    private getTargetNode(): Element {
        if (this.popperTarget) {
            if (typeof this.popperTarget === 'string') {
                return document.querySelector(this.popperTarget);
            } else {
                return this.popperTarget;
            }
        } else {
            return this.el.nativeElement;
        } 
    }
}