他のコードからのモーダルを表示/非表示コンポーネント、角4 Typescriptプロジェクト、

Question

私は大学のための私のアプリケーションの作業を開始し、異なるコンポーネントからコードでブートストラップモーダルを開こうとするときに問題がありました。 同じコンポーネントのコードでコンポーネントを開くときに問題はありません。私はjqueryのを使用し、それだけで正常に動作します：

hideLoginModal(){ 
$('#myModal').modal('hide'); 
} 

モーダルあなたはNavigationComponentでナビゲーションバーのボタンをクリックしたときにポップアップ表示と非表示にする必要があります。 問題は、 "LoginModal"とログインに関連するすべての関数がAccountComponentにある必要があり、現在はNavigationComponentにスタックされていることです。

私は "Login"ボタンをクリックしたときに、AccountComponent/AccountServiceとNavigationComponentに "LoginModal" htmlとhideLoginModal（）関数+他のログイン機能を移そうとしましたが、accountService.openModal（）またはaccountService.hideModal ）。

私はそれがうまくいくはずだと思っていましたが、AccountComponentの$（ '＃myModal'）がそのように呼び出されたときにnullを返す問題があります。

NavigationComponentの「ログイン」ボタンをクリックしたときにAccountComponentのhtmlが存在しない/初期化されていないことが考えられます。あなたはログイン後にAccountComponentビューを見ることができません） 正しく理解しているのですか、それとも他の理由ですか？ 回避策はありますか？

私は非常に間違っている可能性があり、問題を正しく理解できません。タイプスクリプトと角度の学習を始めたばかりです。 誰も助けることができますか？

Answer 1

ngBootstrapを使用する必要があります。 私は以下のように解決しました。 これはあなたのTSファイルで私のモーダル

<div id="myModal" class="modal" role="dialog" [ngbCollapse]="showModal"> 
"" 
"" 
"" 
</div> 

で、あなたが思う変数

showModal = true; 

を宣言する必要があり、私は今、ボタン

<button type="button" class="btn btn-success" data-dismiss="modal" (click) = "toggleModal()">YES</button> 

のクリックでモーダルを切り替えたいですあなたのTSファイルに関数を作成する

toggleModal() 
{ 
    this.showModal = !this.showModal; 
}