Это моя реализация, чтобы получить диалоговое окно подтверждения перед тем, как покинуть определенный маршрут, используя диалоговое окно ngx-bootstrap. У меня есть глобальная переменная под названием «canNavigate» с помощью службы. Эта переменная будет содержать логическое значение, если оно истинно или ложно, чтобы увидеть, возможна ли навигация. Это значение изначально истинно, но если я сделаю изменение в своем компоненте, я сделаю его ложным, поэтому 'canNavigate' будет ложным. Если значение равно false, я открою диалоговое окно, и если пользователь отменит изменения, он пойдет по желаемому маршруту, также приняв queryParams, иначе он не будет маршрутизировать.
м приложении 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 Модал.
Как я могу достичь того же результата, используя вместо этого модальное?