モーダル - 角度4

Question

私は、コンポーネントのアーキテクチャに従って角度4でモーダルを実装する最良の方法を探しています。

私は多くのチュートリアル、外部ライブラリなどを見てきましたが、その使用法はかなり制限されています。基本的には、モーダルサービスを作成する方法、モーダルを管理する方法、およびトランスコードを使用するモーダルコンポーネントを使用して、コンテンツに応じてテンプレートを変更する方法があります。これには、現在のコンポーネントのテンプレートにモーダルを配置する必要があります。このような

@Component({ 
selector: 'modal', 
template: ` 
    <div [ngClass]="{'closed': !isOpen}"> 
     <div class="modal-overlay" (click)="close(true)"></div> 

     <div class="modal"> 
      <div class="title" *ngIf="modalTitle"> 
       <span class="title-text">{{ modalTitle }}</span> 
       <span class="right-align" (click)="close(true)"><i class="material-icons md-24">clear</i></span> 
      </div> 

      <div class="body"> 
       <ng-content></ng-content> 
      </div> 
     </div> 
    </div> 

そして使用法：このような何か

<modal title='My title'> 
    <div> 
    My Modal 
    </div> 
</modal>` 

この小さなアプリケーションのための細かいアプローチ。大きなアプリケーションの場合、これは素晴らしい解決策ではありません。アイデアは、コンポーネントを定義せずに動的にコンポーネントを開くサービスを持つことです。 this.openModal(CustomModal)

ng-bootstrapはこれと非常によく似ていますが、ブートストラップ4を使用していますが、まだアルファになっていますので、現在のところ有効なオプションであるとは確信していません。このようにして動作するライブラリや、どのように実現するのか？

Answer 1

ngx-bootstrapを使用せず、@ng-bootstrapを使用することを強くお勧めします。 ngx-bootstrapの機能の欠如、@ ng-bootstrapはより多くの機能と安定性を備えています。

私はngx-bootstrapで始まり、最終的にそれを変更しました。 Angularチームはng-confに@ ng-bootstrapパッケージを推奨しています。

実際には、ngx-bootstrapの一部のコンポーネントが原因で未完了です。