Angular 如何在ng2引导中检查模式确认

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

some.component.ts

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

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

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

警告
&时代；
表单中未保存的数据将丢失。你确定要离开佩奇吗

不，呆在这里
是的，我想离开佩奇

我添加了guard，看起来像这样：

可以停用.guard.ts

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

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

@Injectable（）
导出类CanDeactivateGuard实现CanDeactivate{
烛台(
组件：一些组件，
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：Promise | boolean{
如果（！component.form.dirty）{
返回true；
}
返回false；
}
}

阻塞路由工作正常！如果我试图转到其他页面，则会显示带有警告的模态。当我单击“取消”按钮时，modal正在隐藏，但我不知道，我应该如何向guard传递确认以进入“用户选择”页面。一些想法

我知道

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

---

工作，但我关心我的风格模态

我们有同样的情况，我们正在使用

这就是在实现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()
      })
  }

公共canDeactivate（）：Promise | boolean{ 返回（！this.editing&&！this.submitting） || 新承诺（（解决、拒绝）=>{ const subscriptionOnClose:Subscription=this.candeactivatemodel.onClose.Subscription（（）=>{ subscriptionOnClose.unsubscribe（） subscriptionndismiss.unsubscribe（） 解析（真） }) const subscriptionndismiss:Subscription=this.candeactivatemodel.onDismiss.subscribe（（）=>{ subscriptionOnClose.unsubscribe（） subscriptionndismiss.unsubscribe（） this.eventSelectorComponentDisabled=false 解析（false） }) this.canDeactivateModal.open（） }) } 卫兵

@Injectable（）
导出类CanDeactivateCategoriesGuard实现CanDeactivate{
烛台(
组件：分类组件，
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：Promise | boolean{
返回组件.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>

{{title}}

{{message}}

{{dismissbuttonext}
{{closeButtonText}