Javascript 角度4-检测到循环相关性。两个组件具有另一个组件#x27；已导入s.ts文件

目前正在解决我们的代码库中引入的循环依赖关系。我们的团队使用webpack循环依赖插件，因此如果发现其中一个循环依赖，我们会在浏览器控制台中收到通知

浏览器控制台中的错误如下所示： 检测到循环依赖项： src\app\domain\admin\employer\employer form\employer-form.component.ts-> src\app\domain\admin\people\people form\people-form.component.ts-> src\app\domain\admin\people\people form\demographics form\demographics-form.component.ts->src\app\domain\admin\employer\employer form\employer-form.component.ts

雇主表格.component.ts的相关部分

import { PanelTypesEnum } from '../../core/enums/panel-types.enum';
import { PeopleFormComponent } from '../../people/people-form/people-form.component';
import { PeopleService } from '../../people/people.service';

@Component({
    selector: 'hl2-employer-form',
    templateUrl: 'employer-form.component.html',
    styleUrls: ['employer-form.component.scss']
})

export class EmployerFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;
    ...

     constructor(route: ActivatedRoute,
            ...) {
    super(route);
}

    ngOnInit() {
        this.initializeForm();
        this.componentInitialize();
        this.initializeSubscriptions();
    }


    confirmCancel(): void {
        if (!this.employerForm.pristine || this.employerForm.dirty) {
            this.adminConfirmationService.confirm(this.confirmation);
        } else {
            this.navigateAwayFromForm();
        }
    }

    componentInitialize(): void {
        this.confirmation = {message: '', accept: () => { this.navigateAwayFromForm(); }};
        this.panelService.onPanelHide.takeUntil(this.ngUnsubscribe)
            .subscribe(panel => {
                if (panel && panel.id === this.model.id) {
                    this.confirmCancel();
                } else if (this.panelService.verifyEditFormPanelRequiresConfirmation(this.model, panel)) {
                    this.confirmation.databag = <PanelModel>panel;
                    this.confirmCancel();
                } else {
                    this.navigateAwayFromForm();
                }
            });
    }

    navigateAwayFromForm(): void {
        let panel: PanelModel;
        this.employerForm.reset('');
        this.panelService.removePanel(this.model);

        // in the case this form was activated by people form, only allow the user to navigate back to the people form on cancel, or pill click.
        if (this.model.options.activatorPanel === <Component>PeopleFormComponent) {
            if (this.peopleService.person.getValue().peopleId) {
                // need to check current person in peopleService to determine if there is
                // a peopleId assigned. If so, we need to redirect the user back to edit people form.
                this.adminPanelService.newPeoplePanel(PanelTypesEnum.EditPeople, <Component>PeopleFormComponent,
                    <Component>EmployerFormComponent, false);
            } else {
                this.adminPanelService.newPeoplePanel(PanelTypesEnum.CreatePeople, <Component>PeopleFormComponent,
                    <Component>EmployerFormComponent, false);
            }
            return;
        }

        // otherwise, set next panel onFormClosed
        if (this.confirmation.databag instanceof PanelModel) {
            panel = this.confirmation.databag;
        } else {
            panel = this.adminPanelService.getEmployerGridPanel();
        }
        this.panelService.onFormClosed.next(panel);
    }
 ....

import { EmployerFormComponent } from '../../employer/employer-form/employer-form.component';
import { DisplayDateTimePipe } from 'shared/date.pipe';
import { PeopleConstants } from '../../core/constants/people-constants';

@Component({
    selector: 'hl2-people-form',
    templateUrl: './people-form.component.html',
    styleUrls: ['./people-form.component.scss']
})

export class PeopleFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;
    @ViewChild(DemographicsFormComponent) demographicsFormComponent: DemographicsFormComponent;

   ...
   ...

    showEmployerGrid: BehaviorSubject<boolean> = new BehaviorSubject(false);

    constructor(route: ActivatedRoute,
                ...) {
        super(route);
    }

    ngOnInit(): void {
        this.componentInitialize();
        this.initializeForm();
        this.initializeSubscriptions();
    }

public initializeForm(): void {
    if (this.model.options.activatorPanel === <Component>EmployerFormComponent) {
        this.showEmployerGrid.next(true);
    }

    this.peopleForm = PeopleFormUtils.newPeopleForm(this.formBuilder);

    this.nameTypeOptions = AdminConstants.nameTypeOptions();
    this.prefixOptions = AdminConstants.prefixOptions();
    this.suffixOptions = AdminConstants.suffixOptions();
    this.professionalSuffixOptions = AdminConstants.professionalSuffixOptions();

    this.genderOptions = PeopleFormUtils.translateGenderOptions(this.translateService);
    this.maritalOptions = AdminConstants.maritalStatusOptions();
    this.languageOptions = AdminConstants.languageOptions();
    this.races = AdminConstants.metaDataList.races;
    this.ethnicities = AdminConstants.metaDataList.ethnicities;
}
    navigateAwayFromForm(): void {
        let panel: PanelModel;
        this.demographicsFormComponent.demographicsForm.reset('');
        this.panelService.removePanel(this.model);

        // in the case this form was activated by user form, only allow the user to navigate back to the user form on cancel, or pill click.
        if (this.model.options.activatorPanel === <Component>UserFormComponent) {
            // override default requireConfirmation setting, since this is reopening the people grid modal within the user form.
            this.adminPanelService.newUserPanel(PanelTypesEnum.CreateUser, <Component>UserFormComponent, <Component>PeopleFormComponent, false);
            return;
        }

        // otherwise, set next panel onFormClosed
        if (this.confirmation.databag instanceof PanelModel) {
            panel = this.confirmation.databag;
        } else {
            panel = this.adminPanelService.getPeopleGridPanel();
        }
        this.panelService.onFormClosed.next(panel);
    }

    componentInitialize(): void {
        this.confirmation = {
            message: '', accept: () => {
                this.navigateAwayFromForm();
            }
        };
        this.panelService.onPanelHide.takeUntil(this.ngUnsubscribe)
            .subscribe((panel) => {
                //probably x click from pill
                if (panel && panel.id === this.model.id) {
                    this.confirmCancel();
                } else if (this.panelService.verifyEditFormPanelRequiresConfirmation(this.model, panel)) {
                    this.confirmation.databag = <PanelModel>panel;
                    if (this.areFormsDirty()) {
                        this.confirmCancel();
                    } else {
                        this.navigateAwayFromForm();
                    }
                }
            });
    }

从“../../core/enums/panel-types.enum”导入{PanelTypesEnum}；
从“../../people/people form/people form.component”导入{PeopleFormComponent}；
从“../../people/people.service”导入{PeopleService}；
@组成部分({
选择器：“hl2雇主表格”，
templateUrl:'employer form.component.html'，
StyleURL:['employer-form.component.scss']
})
导出类EmployPerformComponent扩展BaseComponentService实现OnInit、OnDestroy{
@Input（）模型：PanelModel；
...
构造器（路线：ActivatedRoute，
...) {
超级（路线）；
}
恩戈尼尼特（）{
这是.initializeForm（）；
这个.componentialize（）；
this.initializeSubscriptions（）；
}
confirmCancel（）：void{
如果（！this.employerForm.pristine | | this.employerForm.dirty）{
this.admininformationservice.confirm（this.confirmation）；
}否则{
this.navigateAwayFromForm（）；
}
}
componentInitialize（）：void{
this.confirmation={消息：“”，接受：（）=>{this.navigateAwayFromForm（）；}}；
this.panelService.onPanelHide.takeUntil（this.ngUnsubscribe）
.订阅（面板=>{
if（panel&&panel.id==this.model.id）{
这个.confirmCancel（）；
}else if（this.panelService.verifyeditformpanelrequireconfirmation（this.model，panel））{
this.confirmation.databag=面板；
这个.confirmCancel（）；
}否则{
this.navigateAwayFromForm（）；
}
});
}
navigateAwayFromForm（）：void{
let-panel:PanelModel；
此。员工绩效。重置（“”）；
this.panelService.removePanel（this.model）；
//如果此表单由人员表单激活，则仅允许用户在取消或单击时导航回人员表单。
if（this.model.options.activatorPanel===PeopleFormComponent）{
if（this.peopleService.person.getValue（）.peopleId）{
//需要检查peopleService中的当前人员以确定是否存在
//已分配peopleId。如果是这样，我们需要将用户重定向回编辑人员表单。
this.adminPanelService.newPeoplePanel（PanelTypesEnum.EditPeople，PeopleFormComponent，
Employee组件，false）；
}否则{
这个.adminPanelService.newPeoplePanel（PanelTypesEnum.CreatePeople，PeopleFormComponent，
Employee组件，false）；
}
回来
}
//否则，将下一个面板设置为关闭
if（此.confirmation.databag实例为PanelModel）{
panel=this.confirmation.databag；
}否则{
panel=this.adminPanelService.getEmployerGridPanel（）；
}
this.panelService.onFormClosed.next（panel）；
}
....

人的相关部分构成.component.ts

import { PanelTypesEnum } from '../../core/enums/panel-types.enum';
import { PeopleFormComponent } from '../../people/people-form/people-form.component';
import { PeopleService } from '../../people/people.service';

@Component({
    selector: 'hl2-employer-form',
    templateUrl: 'employer-form.component.html',
    styleUrls: ['employer-form.component.scss']
})

export class EmployerFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;
    ...

     constructor(route: ActivatedRoute,
            ...) {
    super(route);
}

    ngOnInit() {
        this.initializeForm();
        this.componentInitialize();
        this.initializeSubscriptions();
    }


    confirmCancel(): void {
        if (!this.employerForm.pristine || this.employerForm.dirty) {
            this.adminConfirmationService.confirm(this.confirmation);
        } else {
            this.navigateAwayFromForm();
        }
    }

    componentInitialize(): void {
        this.confirmation = {message: '', accept: () => { this.navigateAwayFromForm(); }};
        this.panelService.onPanelHide.takeUntil(this.ngUnsubscribe)
            .subscribe(panel => {
                if (panel && panel.id === this.model.id) {
                    this.confirmCancel();
                } else if (this.panelService.verifyEditFormPanelRequiresConfirmation(this.model, panel)) {
                    this.confirmation.databag = <PanelModel>panel;
                    this.confirmCancel();
                } else {
                    this.navigateAwayFromForm();
                }
            });
    }

    navigateAwayFromForm(): void {
        let panel: PanelModel;
        this.employerForm.reset('');
        this.panelService.removePanel(this.model);

        // in the case this form was activated by people form, only allow the user to navigate back to the people form on cancel, or pill click.
        if (this.model.options.activatorPanel === <Component>PeopleFormComponent) {
            if (this.peopleService.person.getValue().peopleId) {
                // need to check current person in peopleService to determine if there is
                // a peopleId assigned. If so, we need to redirect the user back to edit people form.
                this.adminPanelService.newPeoplePanel(PanelTypesEnum.EditPeople, <Component>PeopleFormComponent,
                    <Component>EmployerFormComponent, false);
            } else {
                this.adminPanelService.newPeoplePanel(PanelTypesEnum.CreatePeople, <Component>PeopleFormComponent,
                    <Component>EmployerFormComponent, false);
            }
            return;
        }

        // otherwise, set next panel onFormClosed
        if (this.confirmation.databag instanceof PanelModel) {
            panel = this.confirmation.databag;
        } else {
            panel = this.adminPanelService.getEmployerGridPanel();
        }
        this.panelService.onFormClosed.next(panel);
    }
 ....

import { EmployerFormComponent } from '../../employer/employer-form/employer-form.component';
import { DisplayDateTimePipe } from 'shared/date.pipe';
import { PeopleConstants } from '../../core/constants/people-constants';

@Component({
    selector: 'hl2-people-form',
    templateUrl: './people-form.component.html',
    styleUrls: ['./people-form.component.scss']
})

export class PeopleFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;
    @ViewChild(DemographicsFormComponent) demographicsFormComponent: DemographicsFormComponent;

   ...
   ...

    showEmployerGrid: BehaviorSubject<boolean> = new BehaviorSubject(false);

    constructor(route: ActivatedRoute,
                ...) {
        super(route);
    }

    ngOnInit(): void {
        this.componentInitialize();
        this.initializeForm();
        this.initializeSubscriptions();
    }

public initializeForm(): void {
    if (this.model.options.activatorPanel === <Component>EmployerFormComponent) {
        this.showEmployerGrid.next(true);
    }

    this.peopleForm = PeopleFormUtils.newPeopleForm(this.formBuilder);

    this.nameTypeOptions = AdminConstants.nameTypeOptions();
    this.prefixOptions = AdminConstants.prefixOptions();
    this.suffixOptions = AdminConstants.suffixOptions();
    this.professionalSuffixOptions = AdminConstants.professionalSuffixOptions();

    this.genderOptions = PeopleFormUtils.translateGenderOptions(this.translateService);
    this.maritalOptions = AdminConstants.maritalStatusOptions();
    this.languageOptions = AdminConstants.languageOptions();
    this.races = AdminConstants.metaDataList.races;
    this.ethnicities = AdminConstants.metaDataList.ethnicities;
}
    navigateAwayFromForm(): void {
        let panel: PanelModel;
        this.demographicsFormComponent.demographicsForm.reset('');
        this.panelService.removePanel(this.model);

        // in the case this form was activated by user form, only allow the user to navigate back to the user form on cancel, or pill click.
        if (this.model.options.activatorPanel === <Component>UserFormComponent) {
            // override default requireConfirmation setting, since this is reopening the people grid modal within the user form.
            this.adminPanelService.newUserPanel(PanelTypesEnum.CreateUser, <Component>UserFormComponent, <Component>PeopleFormComponent, false);
            return;
        }

        // otherwise, set next panel onFormClosed
        if (this.confirmation.databag instanceof PanelModel) {
            panel = this.confirmation.databag;
        } else {
            panel = this.adminPanelService.getPeopleGridPanel();
        }
        this.panelService.onFormClosed.next(panel);
    }

    componentInitialize(): void {
        this.confirmation = {
            message: '', accept: () => {
                this.navigateAwayFromForm();
            }
        };
        this.panelService.onPanelHide.takeUntil(this.ngUnsubscribe)
            .subscribe((panel) => {
                //probably x click from pill
                if (panel && panel.id === this.model.id) {
                    this.confirmCancel();
                } else if (this.panelService.verifyEditFormPanelRequiresConfirmation(this.model, panel)) {
                    this.confirmation.databag = <PanelModel>panel;
                    if (this.areFormsDirty()) {
                        this.confirmCancel();
                    } else {
                        this.navigateAwayFromForm();
                    }
                }
            });
    }

从“../../employer/employer form/employer form.component”导入{EmployeePerformComponent}；
从“shared/date.pipe”导入{DisplayDateTimePipe}；
从“../../core/constants/PeopleConstants”导入{PeopleConstants}；
@组成部分({
选择器：“hl2人员表单”，
templateUrl:“./people form.component.html”，
样式URL:['./人表单.component.scss']
})
导出类PeopleFormComponent扩展BaseComponentService实现OnInit、OnDestroy{
@Input（）模型：PanelModel；
@ViewChild（DemographicsFormComponent）DemographicsFormComponent:DemographicsFormComponent；
...
...
showEmployerGrid:BehaviorSubject=新的BehaviorSubject（false）；
构造器（路线：ActivatedRoute，
...) {
超级（路线）；
}
ngOnInit（）：void{
这个.componentialize（）；
这是.initializeForm（）；
this.initializeSubscriptions（）；
}
public initializeForm（）：void{
if（this.model.options.activatorPanel===EmployPerformComponent）{
this.showEmployerGrid.next（true）；
}
this.peopleForm=PeopleFormUtils.newPeopleForm（this.formBuilder）；
this.nameTypeOptions=AdminConstants.nameTypeOptions（）；
this.prefixOptions=AdminConstants.prefixOptions（）；
this.suffixOptions=AdminConstants.suffixOptions（）；
this.professionalSuffixOptions=AdminConstants.professionalSuffixOptions（）；
this.genderOptions=PeopleFormUtils.translateGenderOptions（this.translateService）；
this.maritalOptions=AdminConstants.maritalStatusOptions（）；
this.languageOptions=AdminConstants.languageOptions（）；
this.races=AdminConstants.metaDataList.races；
this.ethnicities=AdminConstants.metaDataList.ethnicities；
}
navigateAwayFromForm（）：void{
let-panel:PanelModel；
此.demographicsFormComponent.demographicsForm.reset（“”）；
this.panelService.removePanel（this.model）；
//如果此表单由用户表单激活，则仅允许用户在取消或单击时导航回用户表单。
if（this.model.options.activatorPanel===UserFormComponent）{
//覆盖默认的requireConfirmation设置，因为