0

Scenario:

Tech: Angular version 5 app using typescript and webpack.

I Have made a canDeactivate guard to see if a users wants to leave the current route.

When the user tries to navigate to another route a custom modal needs to appear that I've shown.

Then the user clicks yes in the modal (e.g. I want to navigate away).

Problem:

My guard service get hit fine but the modal method "canDeactivate" doesnt get hit. Therefore the modal doesnt open.

I've added the custom modal component to the html.

I've added the guard and the modal to the app module fine.

These are my files below

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;
  }
}

My custom modal:

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;
    }

Route with canDeactivate set:

  {
    path: 'createJob',
    component: testComponent,
    canDeactivate: [ DeactivateGuardService ],
  },
AngularM
  • 15,982
  • 28
  • 94
  • 169
  • If you `console.log(component)`, do you see your modal component appear in the console? – DeborahK Feb 06 '18 at 18:08
  • No I see the test component. It works if I add it to test component but that's not the solution I'm looking for – AngularM Feb 06 '18 at 18:13
  • 1
    Yes, getting the deactivated component is what I would expect. In every example I've ever seen and in every app I've done that's needed it ... the canDeactivate provides the instance of the deactivated component ... not any other desired component. AFAIK, you can't tell it to inject any other component. – DeborahK Feb 06 '18 at 18:27
  • I might do a parent component and then all it's children will be covered. Il add the candeactivate to the parent component and then add a modal to the parent layout. Sound goood? – AngularM Feb 06 '18 at 19:43
  • 1
    That could work. – DeborahK Feb 06 '18 at 20:33
  • Problem I now have is I need a canDeactivateChild and it doesnt exist - only canDeactive exists which doesnt get hit for child routes – AngularM Feb 07 '18 at 09:58

0 Answers0