在canDeactivate方法中添加导航

Question

CanDeactivate卫兵。

有没有可能，当离开一个组件时，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; }
}

}

现在这不是工作了。当点击Cancel一次又一次的打开确认窗口，并且在cosole中是：‘之前’，‘之后’。仅当首次单击取消，然后单击确定时，才重定向到注册页面。

更新:看起来我用承诺解决了这些问题。

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']);
}

有人能提供更好的解决方案吗？

Answer 1

假设寄存器寄存器组件路径是‘’，您可以使用以下方法

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