配置模式对话框

Question

我在角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的模态/插件/引导<<import { Modal } from 'angular2-modal/plugins/bootstrap';>>。

有人能告诉我如何删除“Ok”按钮，并添加“是”和“否”按钮吗？

谢谢

Answer 1

您从提供的引导插件中选择了错误的模式方法alert()。

使用.confirm()模式代替。

检查一下模态码发生器。

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

然后将其添加到declarations和entryComponents的@NgModule元数据中。

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

柱塞实例

Answer 3

您可以在.footerClass('no-display')之前添加open()，并按如下方式定义这个CSS类：

no-display {
    display: none;
}