我添加了 PopperJS 2.11 作為依賴項。然后我嘗試在 AppComponent 中使用 Popper，但我不確定如何呼叫 Popper 的實體。這是我的代碼：
app.component.html：
<button #button>Click</button>
<div #tooltip>
lorem ipsum
</div>
app.component.ts：
import { Component,OnInit, ViewChild} from '@angular/core';
import { createPopper, VirtualElement, Instance } from '@popperjs/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('button') button: Element | VirtualElement;
@ViewChild('tooltip') tooltip: HTMLElement;
ngAfterViewInit(){
createPopper(this.button, this.tooltip, {
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
],
});
}
}
但在控制臺中我有：createPopper.js:209 Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.
uj5u.com熱心網友回復：
更新問題是你在寫
**WRONG**
@ViewChild('button') button: Element | VirtualElement;
@ViewChild('tooltip') tooltip: HTMLElement;
使用 viewChild 你會得到一個 ElementRef
@ViewChild('bt', { static: true }) button!: ElementRef
@ViewChild('tooltip', { static: true }) tooltip!: ElementRef
并使用
this.popperInstance = Popper.createPopper(this.button.nativeElement,
this.tooltip.nativeElement)
使用本教程的第一個示例查看 stackblitz
注意：不要忘記安裝 @propperjs/core
npm i @popperjs/core
見stackblitz
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/437357.html
上一篇：在ngoninit中使用異步管道