角6+ Popper.js (不含jQuery)

Question

我正在尝试将Popper.js设置为使用角5，而不需要引导或jquery。我试着遵循这个https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration，但是对于角度应用来说，这并不是一个A到B点的描述。

我通过npm安装了Popper.js

npm install popper.js --save

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

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

由于esm/popper.js导出Popper变量，如下所示。

var Popper = function () {

我想我应该在我的角模板中声明popper变量，如下所示

declare var Popper;

唉，我运气不好。

​

​

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

Answer 1

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

npm install popper.js --save

然后，我将Popper定义为角-cli.json中的外部脚本。

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