问题描述
我在 Tippy.js 上使用 ngneat/helipopper 包装器来创建上下文菜单。一切都很好,除了当我选择一个项目时我无法让菜单关闭。 Github 在这里:https://github.com/ngneat/helipopper
我尝试了十多种变体,包括推荐的 withContextMenuVariation
函数(它似乎没有任何作用)。
我有一个使用 ng-template
版本的tippy。模板有一个组件(因为我需要将一堆输入传递给菜单组件)。
这是跨度。这个特殊的变体是一个自定义的变体,所以我完全有可能在配置中出现问题,但标准的 popperVariation
具有相同的“不会关闭”问题。
<span [tippy]="upcastmenu" variation="popper"> UPCAST</span>
...
<ng-template #upcastmenu>
<spell-upcast-menu
[startingSpellLevel]="level$ | async"
[spellSlots]="spellSlots$ | async"
[spell]="charSpell"
></spell-upcast-menu>
</ng-template>
Tippy Variation(当前):
const popoverVariation: Partial<TippyProps> = {
animation: "scale",arrow: true,offset: [0,10],trigger: "mouseenter",interactive: true
};
...
TippyModule.forRoot({
defaultvariation: "tooltip",variations: <Record<string,Partial<TippyProps>>>{
tooltip: tooltipVariation,popper: popoverVariation
}
})
解决方法
好吧,在尝试了更多配置之后,我得出的结论是这个库根本不起作用。我下载了源代码并尝试浏览示例。源代码和 @%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe -NoProfile -Command "$Content = Get-Content -LiteralPath '%UserProfile%\Desktop\test.txt' -Tail 2; If ((New-TimeSpan -Start ($Content[0] -Split ' ')[0] -End ($Content[1] -Split ' ')[0]).TotalSeconds -GT 20) {Exit 2}"
@If ErrorLevel 2 Echo Timespan is over twenty seconds.
代码似乎不一样。这些示例包括 npm install
,但是当我编译我的示例时,我收到错误,提示没有设置为 <ng-template #templateRef="tippy">
。当我尝试注入令牌时,angular 抱怨没有提供程序。
所以,我的解决方案是删除这个库并切换到另一个库,mdbootstrap,它有很多很棒的文档,更好的是,它完全符合我的需要。