Question

我在 angular 2

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

我正在尝试删除用户，我希望有一些按钮，例如＆＃39;是＆＃39;并且没有＆＃39;。这是模态的快捷方式。

这是功能：

 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 ＆LT;＆LT; import { Modal } from 'angular2-modal/plugins/bootstrap';＆GT;＆GT;

有人可以告诉我如何删除＆＃39; Ok＆＃39;按钮并添加“是”＆＃39;和＆＃39;不＆＃39;按钮，拜托？

谢谢

Answer 1

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

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

<强> Plunker Example

Answer 2

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

改为使用.confirm()模式。

检查modal code Generator。

Answer 3

You can add .footerClass('no-display') before your open(), and define this CSS class like so :

no-display {
    display: none;
}

配置模态对话框

3 个答案: