Question

我正在尝试从表中删除记录。用户单击删除按钮，它将打开一个确认框。用户单击框中的删除按钮，然后应删除。我想将行的$事件传递给bootstrap模式，以便我可以获取单元格详细信息并处理删除。以下是代码

<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

我已经在我的应用程序中创建了一些组件。我会尝试与你分享想法。首先，我建议你使用ng2-bootstrap，它提供了更好的方法来处理angular2中的模态。随着我的位置，我创建了一个通用的确认模式，它也可以确认某个实体的动作（女巫将是你的$事件）。它是这样的：

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>

这个小组件给我带来了魔力。我现在已经用了一百万次了。甚至使用相同的想法创建了在行中删除的内联确认。

我希望这会对你有所帮助。

如何将行$事件传递给角度2中的bootstrap模式

2 个答案: