Добавить навигацию внутри метода canDeactivate - PullRequest
Новая
       14

Добавить навигацию внутри метода canDeactivate

0 голосов
/ 08 мая 2019

CanDeactivate Guards.

Возможно ли, что при выходе из компонента canDeactivate не только отображает окно подтверждения с да / нет, но и перемещается к другому компоненту?Примерно так: 

canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
if (this.registrationService.isRegistered()) {
  return true;
} else {
  if (!confirm('If you do not register, your data will be lost. Click Cancel to go to Registration page.')) {
    console.log('before');
    this.router.navigate(['register']); // <----
    console.log('after');
    return false;
  } else { return true; }
}

}

Теперь это не работает.Когда нажимаете кнопку «Отмена», снова и снова открывайте окно подтверждения, и в конечном итоге это «до», «после».Переадресация на страницу регистрации только в том случае, если сначала нажать кнопку «Отмена», а затем кнопку «ОК».

ОБНОВЛЕНИЕ: Кажется, я решил их с помощью PROMISE 

private isCanDeactivate: boolean;
canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
 if (this.registrationService.isRegistered()) {
   return true;
 } else {
   if (!confirm('If you do not register, your data will be lost. Click Cancel to go to Registration page.')) {
     console.log('press Cancel');
     this.retrieve().then(() => this.afterPromise());
     return this.isCanDeactivate;
   } else {
     console.log('press Ok');
     return true; }
  }
}

private retrieve(): Promise<any> {
 return new Promise((resolve) => {
   this.retrieveDataResolver = resolve;
   this.setIsCanDeactivate();
 });
}

private setIsCanDeactivate(): void {
 this.isCanDeactivate = true;
 this.retrieveDataResolver();
}
private afterPromise() {
 this.router.navigate(['register']);
}

Может кто-нибудь помочь с лучшим решением?

1 Ответ

0 голосов

Предполагая, что путь к компоненту register равен 'register', вы можете сделать это следующим образом 

this.router.navigateByUrl('register');

Также Вы можете использовать location.back() для перехода на последнюю страницу. 

import {Component} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
 })
class LoginPage {

  constructor(private location: Location) 
  {}

  onBackClicked() {
    this.location.back();
  }
}
...