行2 $イベントを角度2のブートストラップモーダルに渡す方法

Question

テーブルからレコードを削除しようとしています。ユーザーが削除ボタンをクリックすると、確認ボックスが開きます。ユーザーがボックス内の削除ボタンをクリックすると削除されます。私は行の$イベントをブートストラップモーダルに渡して、セルの詳細を取得して削除を処理できるようにしたいと思います。コードは以下のとおりです

<td> 
    <a href="#" style="color:brown" data-toggle="modal" data-target="#confirm-delete"> 
     <span class="glyphicon glyphicon-trash"></span> 
    </a> 
</td> 

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        Confirm? 
       </div> 
       <div class="modal-body"> 
        Are you sure that you want to delete the record? 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <a class="btn btn-danger btn-ok" (click)="deleteExpense($event)">Delete</a> 
       </div> 
      </div> 
     </div> 
    </div> 

これを行うには？もっと良い方法はありますか？

Answer 1

ここに代わり、再び同じコードを使用して、同じのためのモーダル・コンポーネントを削除して、もう一度 を作成することは同じのために私のコードでより良い、ちょうど行のデータを渡すとすることができます。この

<delete (deleteFun)="DeleteElement(Number)" [pk]='Number'></delete> 

のように使用します例に

http://plnkr.co/edit/AiDiNl8SrSKIwDUYWl50?p=preview

PSの作業ここを参照してください：複数のコンポーネントは、ここで

を参照してください

https://github.com/MrPardeep/Angular2-DatePicker

Answer 2

私はアプリケーションでこれを行うためにいくつかのコンポーネントを作成しました。私はあなたとアイデアを共有しようとします。 まず、angular2でモーダルを行うためのより良い方法を提供するng2-bootstrapを使用することをお勧めします。 それを置いて、特定のエンティティ（魔女はあなたの$イベントになるでしょう）への行動を確認することができる一般的な確認モーダルを作成しました。あなたはこのようにそれを使用することができます場所に

HTML

<div bsModal #modalControl="bs-modal" id="confirmation-dialog" class="modal" tabindex="-1" role="dialog" #registerModal> 
    <div class="modal-dialog register-modal"> 
    <div class="modal-content"> 
     <div class="panel panel-transparent"> 
     <div class="panel-heading"> 
        <span class="title"> 
         {{ title }} 
        </span> 
      <div class="pull-right"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modalControl.hide()"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      </div> 
     </div> 
     <div class="panel-body"> 
      {{ message }} 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <a href="javascript:;" data-dismiss="modal" (click)="modalControl.hide()" class="btn btn-link">voltar</a> 
     <button class="btn btn-primary" (click)="onButtonClick($event)">{{ buttonLabel }}</button> 
     </div> 
    </div> 
    </div> 
</div> 

活字体

@Component({ 
    selector: 'confirmation-dialog', 
    moduleId: module.id, 
    templateUrl: 'confirmation-dialog.component.html', 
    styleUrls: ['confirmation-dialog.component.css'] 
}) 
export class ConfirmationDialogComponent { 
    @ViewChild('modalControl') modalControl: ModalDirective; 

    @Input() title = ''; 
    @Input() message = ''; 
    @Input() buttonLabel = 'Yes'; 
    @Output() confirmedActionOnEntity = new EventEmitter(); 
    @Output() confirmedAction = new EventEmitter(); 
    entity: any; 

    confirmActionOnEntity(entity: any) { 
    this.entity = entity; 
    this.modalControl.show(); 
    } 

    confirmAction() { 
    this.modalControl.show(); 
    } 

    isShown() { 
    return this.modalControl === undefined ? false : this.modalControl.isShown; 
    } 

    onButtonClick(event: any) { 
    if(this.entity !== undefined && this.entity !== null) { 
     this.confirmedActionOnEntity.emit(this.entity); 
     this.entity = undefined; 
    } else { 
     this.confirmedAction.emit(event); 
    } 
    this.modalControl.hide(); 
    } 
} 

このコンポーネントに：

<confirmation-dialog title="my confirmation" message="are you sure you want to do this?" (confirmedActionOnEntity)="methodThatActuallyDoesSomething($event)" #deleteConfirmationDialog></confirmation-dialog> 

<entity-component (delete)="deleteConfirmationDialog.confirmActionOnEntity($event)"><entity-component> 

この小さなコンポーネントは魔法の行っていることは、このようなものです私のために。私はこれまでに何百万回も使用してきました。同じアイデアを使用して行を削除するためのインライン確認を作成しました。

私はこれがあなたを助けてくれることを願っています。