CanDeactivateGuard перенаправить на главную страницу - PullRequest
Новая
       28

CanDeactivateGuard перенаправить на главную страницу

0 голосов
/ 25 февраля 2020

Я хочу, чтобы когда кто-то нажимал кнопку «Назад» в браузере, чтобы предупредить его, а если он нажимает «ОК», я перенаправлю на Домашний компонент. Я использую CanDeactivate Guard и хочу изменить следующее состояние CanDeactivateGuard. Я пытался изменить nextState: 

nextState = { root: currentRoute, url: '/' }

, но всегда перенаправлял меня на предыдущий компонент

can-deactivate-guard.service.ts 

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

export interface CanComponentDeactivate {
   canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

 @Injectable({
  providedIn: 'root'
 })
 export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {

 canDeactivate(component: CanComponentDeactivate,
 currentRoute: ActivatedRouteSnapshot,
 currentState: RouterStateSnapshot,
 nextState?: RouterStateSnapshot
 ): Observable<boolean> | Promise<boolean> | boolean {

 nextState = { root: currentRoute, url: '/' }// try this, but dosen't work
 return component.canDeactivate();
 }
}

Мои компоненты код. pressContinue - это просто логическое значение, если кто-то нажимает кнопку продолжения для следующего компонента. 

  canDeactivate() {
  if (this.pressContinue) {
     return true;
   } else {
     return confirm('Are you sure?');
   }
  }

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Надеюсь, это поможет ...

app.service 

 clickedBackButton = false;
 constructor() { }

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     if(this.clickedBackButton) {
       this.clickedBackButton = false;
       return false;
     }
   return true;
  }

app.routing.module 

const routes: Routes = [ 

  {path: '', component: HomeComponent, canActivate: [AppService]},
  {path: 'about', component: AboutComponent, canActivate: [AppService]}
];

app.component.ts 

constructor(
private location: PlatformLocation,
private appService: AppService) {}

ngOnInit() {    
  this.location.onPopState(() => {
    let conf = confirm('Please confirm');
    if(conf) {
      this.appService.clickedBackButton = false;
      return;
    } 
    this.appService.clickedBackButton = true;
  });
}

app.component. html

<div class="container">
<div class="row">
    <div class="col-4">
        <button class="btn btn-success" style="margin-right: 5px;" [routerLink]="['/']" routerLinkActive="router-link-active" >Home</button>
        <button class="btn btn-primary" [routerLink]="['/about']" routerLinkActive="router-link-active" >About</button>
    </div>
</div>
<router-outlet></router-outlet>

0 голосов
/ 26 февраля 2020

Я не знаю, является ли это лучшим решением, но я изменяю логику c на своем компоненте, чтобы перенаправить меня на домашнюю страницу, и она работает! 

canDeactivate() {
if (this.pressContinue) {
  return true;
 } else {
  var resp = confirm('Are you sure?');

  if(resp == true)
  window.location.href = '';

  return false;
 }
}
...