Javascript 子窗体脏时从父组件到子组件的访问

我已经创建了一个挂起的更改保护，如果表单发生了更改，它会提醒用户，并在导航离开之前发出警告

这一切都很好，但我在页面上有一个子组件，它是使用选择器呈现的，这个组件也有一个表单

如何从我的警卫处访问此表单以检查表单是否脏

警卫：

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';
import { DialogService } from "ng2-bootstrap-modal";
import { ConfirmComponent } from '../components/confirm/confirm.component';
import { Inject } from '@angular/core';

export interface FormComponent {
    form: FormGroup;
}

export class PreventUnsavedChangesGuard implements CanDeactivate<FormComponent> {

constructor(@Inject(DialogService) private dialogService: DialogService) { }

canDeactivate(component: FormComponent): Promise<boolean> {

    if (component.form.dirty) {
        return new Promise<boolean>((resolve, reject) => {

            this.dialogService.addDialog(ConfirmComponent, {
                title: 'Unsaved Changes',
                message: 'You have unsaved changes. Are you sure you want to navigate away?'
            })
                .subscribe((isConfirmed) => {
                    return resolve(isConfirmed);
                });
        });
    }

    return Promise.resolve(true);
    }
}

从'@angular/router'导入{CanDeactivate}；
从'@angular/forms'导入{FormGroup}；
从“ng2引导模式”导入{DialogService}；
从“../components/confirm/confirm.component”导入{ConfirmComponent}；
从“@angular/core”导入{Inject}；
导出接口FormComponent{
表格：表格组；
}
导出类PreventUnsavedChangesGuard实现CanDeactivate{
构造函数（@Inject（DialogService）private DialogService:DialogService）{}
canDeactivate（组件：FormComponent）：承诺{
if（component.form.dirty）{
返回新承诺（（解决、拒绝）=>{
这个.dialogService.addDialog（ConfirmComponent{
标题：“未保存的更改”，
消息：“您有未保存的更改。确实要导航到别处吗？”
})
.订阅（（已确认）=>{
返回解析（已确认）；
});
});
}
返回承诺。解决（真实）；
}
}

将父窗体作为输入传递给子组件。然后子组件需要将输入字段绑定到该表单。如果子窗体的输入字段变脏，则父窗体将变脏。因此，您不需要在您的守卫中访问子窗体。比如说,

父组件ts

父组件的HTML

子组件的HTML

该子组件是否在应用程序中的其他地方使用？？如果它在其他地方没有使用，则从子组件中删除

表单

，并在子组件中使用父组件

表单

。这样，如果子级中的输入字段变脏，则父级也会变脏。@SameerK您能解释一下在子级中使用父级组件是什么意思吗？我的意思是，将父级窗体作为输入传递给子级组件。然后子组件需要将输入字段绑定到该表单。如果子窗体的输入字段变脏，则父窗体将变脏。因此，您不需要访问守卫中的子表单。@SameerK明白了，如果您将其作为一个答案，我将为您标记它，因为我在您的评论后没有使它工作。这个答案令人困惑，因为您无法执行以下行

let inputFieldControl=new FormControl（“”，Validators.required）
this.parentForm.addControl（this.inputFieldControlName，inputFieldControl）在该上下文中。
import {FormBuilder, FormGroup} from "@angular/forms";
private addEmailItemForm : FormGroup;
export class ParentComponent implements OnInit, OnDestroy {

    constructor(private _fb: FormBuilder) {}

    ngOnInit() {
        this.parentComponentForm = this._fb.group({});
    }
}

<child-component
   [parentForm]="parentComponentForm"
</child-component>

export class ChildComponent implements OnInit {
   @Input() parentForm: FormGroup;      
   let inputFieldControl = new FormControl('', Validators.required);
   this.parentForm.addControl(this.inputFieldControlName, inputFieldControl);
}

<input type="text" class="form-control" [formControl]="parentForm.controls[inputFieldControlName]">