时间戳

首页 > 解决方案 > Angular 项目中的 Fomantic-UI：“.popup 不是函数”

jquery - Angular 项目中的 Fomantic-UI：“.popup 不是函数”

问题描述

我正在尝试创建一个 Angular + Fomantic-UI 游乐场，但在将 Fomantic-UI 导入 Angular 项目时遇到问题。

这是我的 StackBlitz：https ://stackblitz.com/edit/angular-hcvmam

如您所见，我确实 import jquery，fomantic-ui-css以及它们的相关类型，并且我正在尝试使用 Fomantic-UI （弹出窗口）的功能之一：

$('.bell.icon', this.el.nativeElement)['popup']({
    popup: $('.ui.popup', this.el.nativeElement),
    position: 'bottom right',
    on: 'click'
});

<i class="large blue bell icon"></i>

<div class="ui popup">
    <div class="ui middle aligned divided list">
        <div class="item" *ngFor="let alert of alerts" [@expandCollapse]>
            <div class="content">
                <div class="header">
                    {{alert.title}}
                </div>
                <div>
                    {{alert.desc}}
                </div>
            </div>
        </div>
    </div>
</div>

但它不起作用：.popup 不是函数

其他 F-UI 模块也是如此，例如modal、transition等dropdown。

你能弄清楚它缺少什么让它工作吗？如果你这样做，你也可以回答这个。

标签： jqueryangulartypescriptpopupfomantic-ui

解决方案

在 stackblitz 上使用 fomantic 和 jquery 库时似乎存在问题。我不确定为什么它们不起作用，但是通过在 index.html 中添加 CDN 链接并使用

declare var $: JQueryStatic;

代替

import $ from 'jquery';

您可以在代码中使用带有 fomantic 添加的 jquery。

https://stackblitz.com/edit/angular-rjet1p

运行代码时，我在您的代码中遇到了一些错误，但它们超出了此问题的范围。

推荐阅读