相关疑难解决方法(0)

在我的Angular 4应用程序中,我有一些带有表单的组件,如下所示:

export class MyComponent implements OnInit, FormComponent {

  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({...});
  }

他们使用Guard服务来防止未提交的更改丢失,因此如果用户在请求确认之前尝试更改路由:

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
  form: FormGroup;
}

export class UnsavedChangesGuardService implements CanDeactivate<FormComponent> {
  canDeactivate(component: FormComponent) {
    if (component.form.dirty) {
      return confirm(
        'The form has not been submitted yet, do you really want to leave page?'
      );
    }

    return true;
  }
}

这是使用一个简单的confirm(...)对话框,它工作得很好.

但是我想用更花哨的模态对话框替换这个简单的对话框,例如使用ngx-bootstrap Modal.

如何使用模态来实现相同的结果？