如何在 ng2-bootstrap 中检查模态确认答案

【问题标题】：How to check modal confirmation in ng2-bootstrap如何在 ng2-bootstrap 中检查模态确认
【发布时间】：2017-07-19 02:14:47
【问题描述】：

当表单中的数据未保存时，我在阻塞路由方面遇到了一点问题。就我而言，我有一个表单组件：

some.component.ts

export class SomeComponent {
    @ViewChild("form") form: NgForm;
    @ViewChild("exitModal") modal;
}

some.component.html的一部分（模态部分）

<div bsModal #exitModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-info" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Warning</h4>
        <button type="button" class="close" (click)="exitModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Unsaved data in form will be lost. Are you sure, that you want to leave page? </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="exitModal.hide()">No, stay here</button>
        <button type="button" class="btn btn-primary" (click)="form.reset(); exitModal.hide()">Yes, I want to leave page</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我路由我加了守卫，看起来是这样的：

can-deactivate.guard.ts

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<SomeComponent> {

    canDeactivate(
        component: SomeComponent,
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Promise<boolean> | boolean {

        if (!component.form.dirty) {
            return true;
        }

        return false;
    }
}

块路由工作正常！如果我尝试转到其他页面，则会显示带有警告的模式。当我点击取消按钮时，模态隐藏，但我不知道，我应该如何通过确认来保护用户页面选择。一些想法？

我知道

return confirm('你确定吗？')

工作，但我关心我的样式模式。

【问题讨论】：

标签： angular bootstrap-modal angular-routing ng2-bootstrap

【解决方案1】：

我们有同样的情况，我们正在使用https://www.npmjs.com/package/ng2-bs3-modal

这是你在实现 canDeactivate 方法的组件中使用它的方式。

保护组件

public canDeactivate(): Promise<boolean> | boolean {
    return (!this.editing && !this.submitting)
      ||
      new Promise<boolean>((resolve, reject) => {
        const subscriptionOnClose: Subscription = this.canDeactivateModal.onClose.subscribe(() => {
          subscriptionOnClose.unsubscribe()
          subscriptionOnDismiss.unsubscribe()
          resolve(true)
        })
        const subscriptionOnDismiss: Subscription = this.canDeactivateModal.onDismiss.subscribe(() => {
          subscriptionOnClose.unsubscribe()
          subscriptionOnDismiss.unsubscribe()
          this.eventSelectorComponentDisabled = false
          resolve(false)
        })
        this.canDeactivateModal.open()
      })
  }

守卫

@Injectable()
export class CanDeactivateCategoriesGuard implements CanDeactivate<CategoriesComponent> {

  canDeactivate(
    component: CategoriesComponent,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> | boolean {
    return component.canDeactivate();
  }
}

模态组件

<modal #modalComponent>
  <modal-header [show-close]="true">
    <h4 class="modal-title"><i class="fa fa-warning"></i> {{title}}</h4>
  </modal-header>
  <modal-body>
    <p *ngFor="let message of messages">
      {{message}}
    </p>
  </modal-body>
  <modal-footer>
    <button class="btn" (click)="modalComponent.dismiss()">
      {{dismissButtonText}}
      </button>
    <button class="btn btn-primary" (click)="modalComponent.close()">
      {{closeButtonText}}
      </button>
  </modal-footer>
</modal>

【讨论】：