No meu aplicativo Angular 4, tenho alguns componentes com um formulário, como este:

export class MyComponent implements OnInit, FormComponent {

  form: FormGroup;

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

eles usam um serviço Guard para impedir que alterações não enviadas sejam perdidas; portanto, se o usuário tentar alterar a rota antes de solicitar uma confirmação:

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

Isso está usando um simplesconfirm(...) diálogo e funciona muito bem.

No entanto, eu gostaria de substituir esse diálogo simples por um diálogo modal mais sofisticado, por exemplo, usando ongx-bootstrap Modal.

Como posso obter o mesmo resultado usando um modal?