Angular + Fomantic-UIプレイグラウンドを作成しようとしていますが、Fomantic-UIをAngularプロジェクトにインポートする際に問題が発生しています。
これが私のStackBlitzです:https://stackblitz.com/edit/angular-hcvmam
ご覧のとおりjquery
、私はインポートfomantic-ui-css
とそれに関連するタイピングを行い、Fomantic-UI(ポップアップ)の機能の1つを使用しようとしています。
$('.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
など。
それを機能させるために何が欠けているのか理解できますか?あなたがそうするならば、あなたはこれに答えることもできます。
stackblitzでfomanticライブラリとjqueryライブラリを使用すると問題が発生するようです。なぜ機能しないのかわかりませんが、index.htmlにCDNリンクを追加して使用することで
declare var $: JQueryStatic;
の代わりに
import $ from 'jquery';
コードにfomanticを追加してjqueryを使用できます。
https://stackblitz.com/edit/angular-rjet1p
コードを実行するとエラーが発生しますが、この質問の範囲外です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加