如何檢查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>