Angular 6 + Popper.js(不含jQuery) [英] Angular 6 + Popper.js (without jQuery)

问题描述

我正在尝试将Popper.js设置为与angular 5一起使用，而无需引导程序或jquery.我尝试遵循此 https://github .com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration ，但对于角度应用程序，它并不是从A到B的准确描述.

I am trying to setup Popper.js to work with angular 5, without bootstrap or jquery. I tried following this https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration, but it is not exactly a point A to B description for angular applications.

我通过npm安装了Popper.js

I installed Popper.js via npm

npm install popper.js --save

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

then I chose to bundle the esm module to my angular-cli scripts

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

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

Since esm/popper.js exports Popper variable as follows.

var Popper = function () {

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

I figured that I would just declare the popper variable in my angular template like this

declare var Popper;

A，我没有运气.

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

Does anybody have ideas on how to correctly implement this?

推荐答案

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

First I installed Popper.js with npm

npm install popper.js --save

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

Then I defined Popper as an external script in angular-cli.json

angular-cli.json

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

然后，我将popper导入角度组件内部，以正确的Angular方式对其进行初始化，我们很高兴.

Then I import popper inside the angular component, initialize it the correct Angular way and we are good to go.

组件

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

这篇关于Angular 6 + Popper.js(不含jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！