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

Question

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

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

如您所见，我确实导入了 jquery、fomantic-ui-css 及其相关类型，并且我正在尝试使用 Semantic-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等

你能找出使它工作所缺少的东西吗？如果你这样做，你也可以回答 this.

Answer 1

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

declare var $: JQueryStatic;

而不是

import $ from 'jquery';

您可以在代码中使用 jquery 和 fomantic 添加项。

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

运行我在你的代码中发现了一些错误，但它们不在这个问题的范围内。

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

Fomantic-UI in Angular project: ".popup is not a function"

jquery

popup

typescript

angular

fomantic-ui