Angular 6 + Popper.js（没有 jQuery）答案

【问题标题】：Angular 6 + Popper.js (without jQuery)Angular 6 + Popper.js（没有 jQuery）
【发布时间】：2018-05-21 20:37:00
【问题描述】：

我正在尝试将 Popper.js 设置为使用 angular 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 模块捆绑到我的 angular-cli 脚本中

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

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

var Popper = function () {

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

declare var Popper;

唉，我运气不好。

有没有人知道如何正确实现这一点？

【问题讨论】：

标签： angular angular5 angular2-template angular6 popper.js

【解决方案1】：

首先我用 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"
      ],

然后我在 Angular 组件中导入 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;
        } 
    }
}

【讨论】：