canDeactivate () не запускается при навигации по страницам в Angular 8 - PullRequest
Новая
       65

canDeactivate () не запускается при навигации по страницам в Angular 8

0 голосов
/ 29 января 2020

У меня есть требование выдавать всплывающее окно пользователю при переходе к другому компоненту из текущего компонента.

И на основании информации, полученной от пользователя, мне придется либо позволить ему уйти, либо заставить его остаться.

После долгих поисков я обнаружил, что используя маршрут guard, который реализует интерфейс canDeactivate, является лучшим подходом к этой проблеме.

Однако даже после пошагового процесса реализации guard метод canDeactivate (), реализованный в guard, никогда не запускается ни на одном из навигация от моего компонента.

Вот моя защита, которую я реализовал как сервис. 

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { SearchProjectComponent } from 'src/app/Project/search-project/search-project.component';
@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard  implements CanDeactivate<SearchProjectComponent> {

    canDeactivate(component: SearchProjectComponent,
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot) {debugger
    alert('called from guard');
    const url: string = state.url;
    console.log('Url: ' + url);

  return component.canDeactivate ? component.canDeactivate() : true;
}
}

SearchComponent - это мой компонент, для которого я пытаюсь реализовать Guard. (При переходе от этого компонента я хочу вызвать всплывающее окно)

Вот мой AppRoutingModule 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { CanDeactivateGuard } from './shared/services/can-deactivate-guard.service';

const routes: Routes = [
    { path: '', loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule), canActivate: [AuthGuard] },
    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
    { path: 'access-denied', loadChildren: () => import('./access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
    { path: 'add-project', loadChildren: () => import('./Project/add-project/add-project.module').then(m => m.AddProjectModule) },
    // tslint:disable-next-line:max-line-length
    { path: 'search-project', loadChildren: () => import('./Project/search-project/search-project.module').then(m => m.SearchProjectModule), canDeactivate: [CanDeactivateGuard] },
    { path: '**', redirectTo: 'access-denied' },

];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

При переходе к любому другому компоненту из searchcomponent метод canDeactivate даже не запускается.

Вот код в моем компоненте. 

  canDeactivate(): Observable<boolean> | boolean {debugger
    alert('called form component');
    if (this.registerForm.dirty) {debugger
      return false;
        //return this.dialogService.confirm('Discard changes for Person?');
    }
    return true;
}
Даже отладчик в моем компоненте не запускается.

Может ли кто-нибудь помочь мне с тем, что мне нужно исправить? (Я просто новичок в Angular, но я чувствую, что эта проблема как-то связана с loadchildren () в модуле маршрутизации)

1 Ответ

0 голосов
/ 29 января 2020

Вам не хватает реализации component.canDeactivate внутри вашего компонента, который является единственным, кто знает, может ли пользователь пропустить или нет.

Итак, внутри ваших компонентов реализует это: 

canDeactivate(): boolean {
 return //condition to verify;
}

Для получения дополнительной информации, смотрите здесь:

https://angular.io/guide/router#candeactivate -обработка-несохраненные-изменения

...