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

Question

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

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

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

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

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

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() в модуле маршрутизации)

Answer 1

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

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

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

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

https://angular.io/guide/router