angular - Tippy.js 仅在 Angular 项目的第一页刷新后才有效

Question

我已经在我的 Angular 项目中安装了tippy.js，这是一个工具提示库（https://atomiks.github.io/tippyjs/），但它仅在第一次刷新页面后才有效。

我已经通过npm install tippy.js命令安装了它，并将其导入到angular.json文件中，如下所示：

        "scripts": [
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/tippy.js/umd/index.all.min.js"
        ],

负责调用它的 html 元素是这样写的：

 <span data-tippy="Tooltip" class="layout-semester theme-semester"><strong>2019</strong>-1sem</span>

我认为该库是在页面完全构建之前加载的，但不知道如何在 Angular 项目中执行它...

Answer 1

我没有使用tippy，但是阅读他们的文档，看起来你需要运行一个tippy(<selector>)它来运行选定的元素并“激活”你称之为工具提示的DOM更改。

在 Angular 中，我猜它会像这样工作：

import tippy from 'tippy.js'

ngAfterViewInit() {
    tippy('span');
}

编辑：stackblitz demo，似乎按预期工作。