angular 2 - 子组件canDeactivate without route

Question

我编写了一个简单字段的组件，我使用的是子组件，它不是表单，而是在父组件对象上添加一些字段。我已经实现了canDeactivate，它完美地运行但不适用于子组件。

<factory-relationship [relationships]="model.relationships" (relationshipUpdated)="relationshipUpdated($event)"></factory-relationship>

我的路线在父母的下方：

{ path: 'factory', component: FactoryFormComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard] },
{ path: 'factory/:id', component: FactoryFormComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard] },

对于工厂关系，我只是导入并使用它。它在数组中添加关系，我更新父组件的模型以添加关系。以下是该页面的屏幕截图。我不确定如何在添加关系和离开时显示丢弃更改。

正如您从截图中看到的，我已经添加了关系，但是当我离开时，它并没有显示丢弃更改。不确定如何在没有路线的情况下应用canDeactivate。

  

factory-relationship.component.ts（省略了一些代码）

@Component({
    moduleId: module.id,
    selector: 'factory-relationship',
    templateUrl: 'factory-relationship.component.html',
    styleUrls: ['../shared/app.shared.css']
})
export class FactoryRelationshipComponent implements OnInit {
    @Output() relationshipUpdated = new EventEmitter();
    @Input() relationships: Array<Relationship>;
    private relationshipForm: FormGroup;
    private showValidation: boolean = false;

    private errorMessage: string;
    private suppliers: Supplier[];
    private businessAreas: BusinessArea[];
    private contacts: Contact[];
    private active: boolean = true;

    relationshipCols: any[];

    constructor(private supplierService: SupplierService, private businessAreaService: BusinessAreaService,
        private router: Router, private utilityService: UtilityService, private formBuilder: FormBuilder) {
        this.relationshipCols = [
            { field: 'supplierName', header: 'supplierName' },
            { field: 'businessArea', header: 'businessArea' },
            { field: 'supplierId', header: 'supplierId' },
            { field: 'businessAreaId', header: 'businessAreaId' }
        ];
    }

    ngOnInit() {
        this.getSuppliers();
        this.getBusinessArea();

        this.relationshipForm = this.formBuilder.group({
            selectedSupplier: ['', [<any>Validators.required]],
            selectedBusinessArea: ['', [<any>Validators.required]],
            selectedContact: ['', [<any>Validators.required]]
        });

        this.relationshipForm.controls.selectedBusinessArea.valueChanges.subscribe(value => {
            if(value !== null)
                this.getContactsForBusinessArea(value)
        });
    }

    private resetForm(): void {
        this.relationshipForm.reset();
        this.relationships.filter(relationship => relationship.inEditMode === true).forEach(x=>x.inEditMode = false);
    }

    private isEditMode(): boolean {
        return (this.relationships.filter(relationship => relationship.inEditMode === true)).length > 0;
    }

    private onSubmit(): void {
        if (this.relationshipForm.valid) {
            let editableRelationship = this.relationships.find(relationship => relationship.inEditMode === true);

            if (editableRelationship) {
                this.createRelationship(editableRelationship);
                editableRelationship.inEditMode = false;
            } else
                this.relationships.push(this.createRelationship(null));

            this.relationshipUpdated.emit(this.relationships);
            this.showValidation = false;
            this.relationshipForm.reset();
        }
        else {
            this.showValidation = true;
        }
    }
}