Question

当表单中的数据未保存时，阻塞路由有点问题。在我的情况下，我有一个组件形式：

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

我路由我添加了后卫，看起来像那样：

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

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

我知道

返回确认（'你确定吗？'）

有效，但我关心风格的模态。

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

GUARD

@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>

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

1 个答案: