Aurelia 中的引导工具提示答案

【问题标题】：Bootstrap-tooltip in AureliaAurelia 中的引导工具提示
【发布时间】：2019-11-02 09:45:31
【问题描述】：

我需要在 aurelia 框架中使用 bootstrap-tooltip。为此，我创建了一个 BootstrapTooltip 属性类。

import {customAttribute, inject} from "aurelia-framework";
import $ from "bootstrap";

@customAttribute("bootstrap-tooltip")
@inject(Element)
export class BootstrapTooltip {
    constructor(element) {
        this.element = element;
    }

    bind() {
        $(this.element).tooltip();
    }

    unbind() {
        $(this.element).tooltip("destroy");
    }
}

这是当前代码。但我收到错误“Bootstrap_1.default 不是函数”

也许这是因为$，但不确定是什么原因...

【问题讨论】：

这一定是因为你是从 bootstrap 导入 $。您应该尝试将其更改为 import $ from 'jquery';
嗨，@CristiánOrmazábal。感谢您的回复。我尝试使用 jquery，但也收到错误“$() 没有方法工具提示”
你是如何在你的项目中导入bootstrap和jquery的，你使用的是哪种捆绑方式？

标签： twitter-bootstrap typescript aurelia twitter-bootstrap-tooltip

【解决方案1】：

查看 aurelia.json 文件中的依赖项并检查您是否在依赖项中设置引导程序以依赖于 jquery。

{
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": [ "jquery" ],
    "exports": "$"
}

这应该扩展全局 jquery 对象“$”以具有引导功能，包括工具提示。

最后从“bootstrap”中删除 import $，因为您尝试从 bootstrap 导入 $，当它已经全局定义时，这可能会导致问题。

【讨论】：