Tippy/NgNeat/Helipopper 如何在 Angular 11 中点击关闭

如何解决Tippy/NgNeat/Helipopper 如何在 Angular 11 中点击关闭

我在 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，它有很多很棒的文档，更好的是，它完全符合我的需要。