配置模式对话框答案

【问题标题】：Configure Modal Dialog配置模式对话框
【发布时间】：2017-10-24 13:03:10
【问题描述】：

我在 angular 2

中配置模式对话框时遇到问题

我正在尝试删除一个用户，并且我希望拥有像“是”和“否”这样的按钮。这是模态的快捷方式。

这是函数：

 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();

  }

对于模态组件，我使用来自 angular2-modal/plugins/bootstrap 的 Modal import { Modal } from 'angular2-modal/plugins/bootstrap';>>

有人可以告诉我如何删除“确定”按钮并添加“是”和“否”按钮吗？

谢谢

【问题讨论】：

这个库似乎不支持它，你得破解一下......

标签： angular dialog popup modal-dialog

【解决方案1】：

您从Angular 2 Modal提供的Bootstrap plugin中选择了错误的模态方法，alert()。

改用.confirm() 模态。

检查modal code Generator。

【讨论】：

【解决方案2】：

您可以创建自定义模态组件，例如：

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 {}

并按如下方式使用

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

Plunker Example

【讨论】：

【解决方案3】：

您可以在open() 之前添加.footerClass('no-display')，并像这样定义这个CSS 类：

no-display {
    display: none;
}

【讨论】：