我正在尝试设置 Popper.js 以使用 Angular 5,无需 Bootstrap 或 jquery。我试着按照这个https://github.com/FezVrasta/popper.js/#react-vuejs-angular-angularjs-emberjs-etc-integration ,但它不完全是 Angular 应用程序的 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 () {
我想我应该像这样在我的 Angular 模板中声明 popper 变量
declare var Popper;
唉,我运气不好。
有人知道如何正确实现吗?
最佳答案
首先我用 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"
],
然后我在 Angular 组件中导入 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;
}
}
}
关于Angular 6 + Popper.js(没有 jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50456299/