如何检查ng2-bootstrap中的模式确认

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

我的路由我加了一个后卫，看起来像这样：

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

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

我知道

返回确认（ '是U确定吗？'）

的作品，但我关心的我的风格模式。

Answer 1

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

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

COMPONENT守护

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>