[英]Angular 6 + Popper.js (without jQuery)
I am trying to setup Popper.js to work with angular 5, without bootstrap or jquery. 我试图设置Popper.js使用角度5,没有bootstrap或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. 我尝试按照https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration进行操作 ,但它并不完全是角度应用程序的A到B描述。
I installed Popper.js via npm 我通过npm安装了Popper.js
npm install popper.js --save
then I chose to bundle the esm module to my angular-cli scripts 然后我选择将esm模块捆绑到我的angular-cli脚本中
"scripts": [
(...)
"../node_modules/popper.js/dist/esm/popper.js"
],
Since esm/popper.js exports Popper variable as follows. 由于esm / popper.js导出Popper变量如下。
var Popper = function () {
I figured that I would just declare the popper variable in my angular template like this 我想我会像这样在我的角度模板中声明popper变量
declare var Popper;
Alas, I had no luck with it. 唉,我没有运气。
Does anybody have ideas on how to correctly implement this? 有没有人对如何正确实现这个有想法?
First I installed Popper.js with npm 首先我用npm安装了Popper.js
npm install popper.js --save
Then I defined Popper as an external script in angular-cli.json 然后我将Popper定义为angular-cli.json中的外部脚本
angular-cli.json 角cli.json
"scripts": [
(...)
"../node_modules/popper.js/dist/esm/popper.min.js"
],
Then I import popper inside the angular component, initialize it the correct Angular way and we are good to go. 然后我在角度组件中导入popper,将其初始化为正确的Angular方式,我们很高兴。
Component 零件
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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.