当在另一个组件内部使用一个组件时，可以停用防护功能不起作用

Question

我无法在应用程序中启用“可以停用”功能。在文件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]
    },
]