設定モーダルダイアログ

Question

私は、問題は、私がユーザーを削除しようとしていますし、私は「はい」と「いいえ」などのボタンを持ちたい角度2

でモーダルダイアログの設定を持っています。 ここにモーダルのショートカットがあります。

これは、関数である：私は < < import { Modal } from 'angular2-modal/plugins/bootstrap'ブートストラップangular2モーダル/プラグイン/からモーダルを使用していますモード成分については

public deleteUser(i: number) { 
    this.modal.alert().size('lg') 
     .title('A simple Alert style modal window') 
     .body(` 
      <h4>Are you sure you want to delete the user?</h4>`) 
     .open(); 

    } 

; >>

誰かがどのように教えてもらえ「OK」ボタンを削除し、「はい」と「いいえ」ボタンを追加してください。

は、あなたがあなたのopen()前.footerClass('no-display')を追加し、そのように、このCSSクラスを定義することができますあなたの

Answer 1

を次のようにそれを使用しています。

代わりに.confirm()モーダルを使用してください。

modal code Generatorを確認してください。

Answer 2

ありがとう：

no-display { 
    display: none; 
} 

Answer 3

あなたが好きなカスタムモーダルコンポーネントを作成することができます。そして、追加

export class CustomModalContext extends BSModalContext { 
    yesCallback:() => Promise<any>; 
} 

@Component({ 
    selector: 'modal-content', 
    template: ` 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button class="close" type="button" (click)="dialog.close()"> 
       <span aria-hidden="true">×</span> 
      </button> 
      <h3 class="modal-title">Confirmation</h3> 
     </div> 


     <div class="modal-body"> 
      <h4>Are you sure you want to delete the user?</h4> 
     </div> 

     <div class="modal-footer"> 
      <button class="btn btn-primary" (click)="yes()">Yes</button> 
      <button class="btn" (click)="dialog.close()">No</button> 
     </div> 
    </div>` 
}) 
export class CustomModal implements CloseGuard, ModalComponent<CustomModalContext> { 
    context: CustomModalContext; 

    constructor(public dialog: DialogRef<CustomModalContext>) { 
    this.context = dialog.context; 
    dialog.setCloseGuard(this); 
    } 

    yes() { 
    this.context.yesCallback() 
     .then(() => this.dialog.close()) 
    } 

    beforeDismiss(): boolean { 
    return true; // prevent closing modal by using Esc 
    } 
} 

あなたの@NgModuleメタデータのdeclarationsとentryComponentsに

declarations: [ App, CustomModal ], 
    entryComponents: [CustomModal], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

、あなたはAngular 2 Modalが提供するBootstrap pluginから間違っモーダル方法、alert()を選択した

deleteUser() { 
    return this.modal.open(CustomModal, 
     overlayConfigFactory({ 
      yesCallback:() => { 
       alert('Deleting'); 
       return Promise.resolve(null) 
      } 
     }, BSModalContext)); 
} 

Plunker Example