[英]Angular 6 + Popper.js (without jQuery)
我试图设置Popper.js使用角度5,没有bootstrap或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;
唉,我没有运气。
有没有人对如何正确实现这个有想法?
首先我用npm安装了Popper.js
npm install popper.js --save
然后我将Popper定义为angular-cli.json中的外部脚本
角cli.json
"scripts": [
(...)
"../node_modules/popper.js/dist/esm/popper.min.js"
],
然后我在角度组件中导入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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.