Угловой 6 + Popper.js (без jQuery)

Question

Я пытаюсь настроить Popper.js для работы с angular 5, без начальной загрузки или jquery.Я попытался следовать этому https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration,, но это не совсем описание точки А-В для угловых приложений.

Я установил Popper.js через npm

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

Сначала я установил Popper.js с помощью npm

npm install popper.js --save

Затем я определил Popper как внешний скрипт в angular-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;
        } 
    }
}