0

我在 Tippy.js 上使用 ngneat/helipopper 包装器来创建上下文菜单。一切都很好，除了当我选择一个项目时我无法关闭菜单。Github在这里：https ://github.com/ngneat/helipopper

我已经尝试了十几种变体，包括推荐的withContextMenuVariation功能（似乎没有做任何事情）。

我有一个使用ng-templatetippy版本的跨度。模板有一个组件（因为我需要将一堆输入传递给菜单组件）。

这是跨度。这个特殊的变体是一个自定义的变体，所以我完全有可能在配置中出错，但标准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
        }
    })
4

1 回答 1

0

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

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

于 2021-07-11T13:38:22.543 回答