Angular 6 + Popper.js（沒有jQuery）

Question

我試圖設置Popper.js使用角度5，沒有bootstrap或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模塊捆綁到我的angular-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定義為angular-cli.json中的外部腳本

角cli.json

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

然后我在角度組件中導入popper，將其初始化為正確的Angular方式，我們很高興。

零件

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