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

Question

我在 Tippy.js 上使用 ngneat/helipopper 包装器来创建上下文菜单。一切都很好，除了当我 select 一个项目时我无法获得 close 的菜单。 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 变体（当前）：

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
        }
    })

Answer 1

好吧，在尝试了更多配置之后，我得出的结论是这个库根本不起作用。我下载了源代码并尝试浏览示例。看来源代码和 npm install 代码不一样。这些示例包括 <ng-template #templateRef="tippy">，但是当我编译我的示例时，出现错误，没有任何设置为 exportAs "tippy"。当我尝试注入令牌时，angular 抱怨没有提供者。

所以，我的解决方案是删除这个库并切换到另一个 mdbootstrap，它有很多很棒的文档，甚至更好，完全可以满足我的需要。

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

Tippy/NgNeat/Helipopper How to Close on Click in Angular 11

angular

tippyjs