angular 9 может деактивировать, не работает, хотя код, кажется, в порядке и не выдает никаких ошибок

Question

Привет, ребята, я новичок в Angular и изучаю его, используя следующую ссылку на руководство. По какой-то причине не работает функция canDeactivate route guard. Любая помощь будет оценена по достоинству, поскольку я пытался проверить многие вещи, но ничего не помогло. У меня последний angular CLI, и в моем коде нет ошибок, и по какой-то причине функция canDeactivate вообще не вызывается во время изменения маршрута.

Я применяю функцию к маршруту CreateEmployee, поэтому, когда я заполняю форму для createEmployee и пытаюсь перейти к другому маршруту, он должен сработать.

create-employee-component.html: здесь у меня мало элементов формы

<form #employeeForm = "ngForm" (ngSubmit)="saveEmployee()" [ngClass]="{'was-validated': employeeForm.submitted}" novalidate>

создать-сотрудник-component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Department } from '../models/department.model';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { Employee } from '../models/employee.model';
import { EmployeeService } from './employee.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
    @ViewChild('employeeForm') public createEmployeeForm: NgForm;
    datePickerConfig: Partial<BsDatepickerConfig>;
    previewPhoto = false;

создать-сотрудник-может-деактивировать-охранник.service.ts

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { CreateEmployeeComponent  } from './create-employee.component';

@Injectable()
export class CreateEmployeeCanDeactivateGuardService implements CanDeactivate<CreateEmployeeComponent>{
    canDeactivate(component: CreateEmployeeComponent): boolean{
        alert("HJEJJEJEJ");
        if(component.createEmployeeForm.dirty)
        {
            return confirm('Are you sure you want to discard your changes?');
        }
        return true;
    }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListEmployeesComponent } from './employees/list-employees.component';
import { CreateEmployeeComponent } from './employees/create-employee.component';
import { CreateEmployeeCanDeactivateGuardService } from './employees/create-employee-can-deactivate-guard.service';


const routes: Routes = [
    {path: 'list', component: ListEmployeesComponent},
    {
        path:'create', 
        component: CreateEmployeeComponent,
        canDeactivate: [CreateEmployeeCanDeactivateGuardService]
    },
    {path: '', redirectTo:'/list', pathMatch:'full'}
];

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

Я чувствую, что все правильно в соответствии с некоторыми другими ответами, которые я нашел в Stackru. Пожалуйста, дайте мне знать, что я здесь делаю не так. Я также разместил здесь свой код.

Answer 1

Я наконец выяснил, в чем проблема. Потратив некоторое время на исследования, я обнаружил, что ранее в навигационной панели я использовал элемент href с тегом привязки, следовательно,canDeactivate охранник не вмешивался. Теперь я изменил его на [routerLink]="['/list']" и canDeactivate начал работать правильно.

Отправка ответа, поскольку он может быть полезен тем, кто ищет решение:

Предыдущая панель навигации с тегом привязки и href элемент:

<a class="nav-link" href="list">List <span class="sr-only">(current)</span></a>

Изменена навигационная панель с тегом привязки и routerLink который отлично работает с canDeactivate:

<a class="nav-link" [routerLink]="['/list']">List <span class="sr-only">(current)</span></a>

Если вы ищете весь код, проверьте вопрос, где я упомянул все фрагменты кода, связанные с canDeactivate охранник.