Angular - у меня проблемы с получением canDeactivate работы с моим модом для маршрута

Question

Сценарий:

Технология: приложение Angular версии 5 с использованием машинописи и веб-пакета.

Я сделал canDeactivate guard, чтобы увидеть, хочет ли пользователь покинуть текущий маршрут.

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

Затем пользователь нажимает да в модале (например, я хочу уйти).

Проблема:

Моя служба охраны попала под удар, но модальный метод "canDeactivate" не попал. Поэтому модал не открывается.

Я добавил пользовательский модальный компонент в HTML.

Я добавил гвардии и модал в модуль приложения в порядке.

Это мои файлы ниже

DeactivateGuardService:

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

import { DeactivateModalComponent } from '../shared/modals/deactivate-modal/deactivate-modal.component';

@Injectable()
export class DeactivateGuardService implements CanDeactivate<DeactivateModalComponent> {

  canDeactivate(component: DeactivateModalComponent) {
    console.log('DeactivateGuardService');

    // Note: I need this canDeactivate to call it inside my modal.
    let canUse = component.canDeactivate();

    return canUse;
  }
}

Мой пользовательский модал:

import { Component, EventEmitter, Output, Input, HostListener } from '@angular/core';

@Component({
    selector: 'deactivate-modal',
    templateUrl: 'deactivate-modal.component.html',
    styleUrls: [
        '../../../managed-app/managed-app.component.scss',
        '../../../managed-app/shared/app-flow-styles.scss',
        'deactivate-modal.component.scss',
    ]
})

export class DeactivateModalComponent {
    public isModalVisible: boolean = false;
    public isRouteActive: boolean = false;

    constructor() {}


    // Note: this is not getting hit - when I need it too.
    canDeactivate() {
        this.isModalVisible = true;
        return this.isRouteActive;
    }

    public toggleModal(isVisible: boolean): void {
        this.isModalVisible = isVisible;
    }

    public redirectUser(): void {
        this.isRouteActive = true;
    }

Маршрут с набором canDeactivate:

  {
    path: 'createJob',
    component: testComponent,
    canDeactivate: [ DeactivateGuardService ],
  },