2017-06-11 29 views
0

私は、コンポーネントのアーキテクチャに従って角度4でモーダルを実装する最良の方法を探しています。モーダル - 角度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を使用していますが、まだアルファになっていますので、現在のところ有効なオプションであるとは確信していません。このようにして動作するライブラリや、どのように実現するのか?

答えて

0

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

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

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

+0

ng-bootstrapにはブートストラップ4は必要ありませんか?そして、あなたはモーダルの基本テンプレートを変更できますか? – Nocktu

+0

@ ng-bootstrapをBootstrap 3 o 4と一緒に使うことができます。両方ともサポートされています。 ngx-bootstrapのようなng-templateを使用してモーダルを開き、コンポーネント(これは私の好きなオプション) 'this.modalService.open(MyComponent)'を開くことができますmore info https://ng-bootstrap.github.io/ #/ components/modal – Serginho

+0

はい、ng-bootstrapはおそらく最も興味深いものです。コンポーネントを渡すサービスによるモーダルを開きます。図書館でのあなたの経験から、入力と出力はこれで問題なく動作しますか?アイデアの1つは、オブジェクトアイテムをモーダルに渡し、フォームを使用してそれを操作し、要求後にメインページをリフレッシュすることです。したがって、基本的にモーダルは、モーダルを開くコンポーネントに応答を送信する必要があります。それが意味をなさないならば。 – Nocktu