ブートストラップドロップダウン

Question

NGX-ブートストラップライブラリを使用せずに角度4アプリケーションでのコンテキストメニューイベントにブートストラップ4ドロップダウンメニューを切り替えるにはどのように簡単な方法はありますか？

$('.dropdown-toggle').dropdown() 

をだから私は、コンテキストメニューのイベントハンドラでこれを実行しようとしましたが、それはうまくいきませんでした：

ブートストラップドキュメントは、あなたが呼び出すことで、JavaScriptからドロップダウンを切り替えることができますと言っています。私はいつも言ってエラーを取得：

を...ドロップダウンが機能

ではありません、私はまたElementRefのネイティブ要素に直接ドロップダウン（）関数を呼び出すことを試みてきたからです@ViewChild（）でも同じエラーが表示されます。

問題はどこですか？データ属性を使用してドロップダウンを切り替えることができます（ここではBootstrapスクリプトがここで動作すると仮定しています）。しかし、これをコンテキストメニューで切り替えることはできませんか？

私は、任意の外部ライブラリなしでソリューションを好むだろう。あなたが達成しようとしている何

Answer 1

のこの種を使用してjQueryの/ JavaScriptの動作を再現できるということです私はちょうどブートストラップのドロップダウンメニューを表示することは十分ではないことを最終的に実現していると私はクリックした場所でコンテキストメニューを配置したいが、これを自分で実装したくない。

だから私はこれまで、外部ライブラリを使用したくないと言っていましたが、ngx-contextmenuを使用することに決めました。セットアップが非常に簡単で、最初に達成したかったBootstrapのドロップダウンスタイルも使用しています。

誰もがこのライブラリを使用したい場合は、単にコンテキストメニューが、現時点ではデフォルトで表示されていないことを​​た例に注意してください。

Answer 2

ドロップダウントグルの多分あまりにも複雑で、はるかに簡単があります：

あなただけのように[class.hidden] =「menuClosed」を追加していない理由：

<div [class.hidden]="menuClosed" class="dropdown">？

は、単純にトグル機能にtrueまたはfalseにごmenuClosed変数を設定し、それが仕事を行います。

EDIT：アンギュラ2+とのクールなことは、あなたがすぐに表示ルール