代码之家 › 专栏 › 技术社区 › Karl Johan Vallner

Angular 6+popper.js(无jquery)

popper.js angular6 angular2-template angular5 angular

3

Karl Johan Vallner · 技术社区 · 8 年前

我正在尝试设置popper.js来使用Angular5,而不使用引导或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;

唉,我运气不好。

有人对如何正确实施这个有想法吗?

1 回复 | 直到 8 年前

1

4

Karl Johan Vallner 7 年前

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

然后我导入角组件内的popper,以正确的角度方式初始化它,我们很好地进行了。

组件

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