может отключить охрану не работает при использовании на одном компоненте, который находится внутри другого

Question

У меня проблемы с работой Can Deactivate в приложении. В файле form.component.html у меня есть следующий код:

   <div class="form-group">
    <label for="quoteType">Quote Type</label>
    <select class="form-control" id="quoteType" name="QuoteType" #type (change)="getQuoteType(type.value)">
      <option selected="selected">---</option>
      <option value="New">New</option>
      <option value="Amendment">Amendment</option>
      <option value="Migration">Migration</option>
      <option value="Replacement/Renewal">Replacement/Renewal</option>
    </select>
  </div>

  <div [ngSwitch]="quotetype">
    <div *ngSwitchCase="'New'">
      <app-form-new [quotetype]="quotetype"></app-form-new>
    </div>
    <div *ngSwitchCase="'Amendment'">
      <app-form-amendment [quotetype]="quotetype"></app-form-amendment>
    </div>
    <div *ngSwitchCase="'Migration'">
      <app-form-migration [quotetype]="quotetype"></app-form-migration>
    </div>
    <div *ngSwitchCase="'Replacement/Renewal'">
      <app-form-replacement-renewal [quotetype]="quotetype"></app-form-replacement-renewal>
    </div>
  </div>

В зависимости от того, что я выберу, будет отображаться другой компонент в этом шаблоне. В этом случае я выберу «Новый»!

Изображение перед выбором:

После выбора нового:

То, что я хочу: если пользователь начинает заполнять форму и невольно или намеренно нажимает кнопку «Назад» на предыдущей странице, появляется сообщение с вопросом, действительно ли он хочет это сделать.

Я могу сделать это на других страницах этой системы, но когда я иду на эти формы, это не работает. Ниже приведен код, который я сделал до сих пор.

new-can-deactivate-guard.service.ts

import { Injectable } from '@angular/core'
import { CanDeactivate } from "@angular/router";
import { FormNewComponent } from './form-new.component'

@Injectable({
    providedIn: 'root'
})
export class FormNewCanDeactivateGuard implements CanDeactivate<FormNewComponent> {
    canDeactivate(component: FormNewComponent): boolean {
        if(component.formNew.dirty) {
            return confirm('Are you sure you want to discard your changes?')
        }

        return true
    }
}

Файл маршрутизации:

export const ROUTES: Routes = [

    { path: '', component: TelaAcessoComponent },

    { path: 'homepage', component: HomepageComponent, children: [
        { path: '', component: QuotesAbertasComponent},
        { path: 'quotes-abertas', component: QuotesAbertasComponent},
        { path: 'quotes-fechadas', component: QuotesFechadasComponent},
        { path: 'quotes-qss', component: QuotesQssComponent},
    ] },

    { 
        path: 'quotes-abertas/:id', 
        component: QuotesAbertasDetalhesComponent,
        canDeactivate: [QuotesAbertasCanDeactivateGuard]
    },

    { 
        path: 'quotes-fechadas/:id', 
        component: QuotesFechadasDetalhesComponent,
        canDeactivate: [QuotesFechadasCanDeactivateGuard]
    },

    {
        path: 'quotes-qss/:id', 
        component: QuotesQssDetailsComponent,
        canDeactivate: [QuotesQssCanDeactivateGuard]
    },

    { path: 'formulario', component: FormularioComponent },

    { 
        path: 'formulario-New', 
        component: FormNewComponent, 
        canDeactivate: [FormNewCanDeactivateGuard]
    },

    { path: 'formulario-Amendment', component: FormAmendmentComponent },
    { path: 'formulario-Migration', component: FormMigrationComponent },
    { path: 'formulario-Renewal/Replacement', component: FormReplacementRenewalComponent },
    { 
        path: 'products/:id', 
        component: ProductsComponent,
        canDeactivate: [ProductsCanDeactivateGuard]
    },
]