从子组件返回到父组件时，ViewChild返回未定义

问题描述

我声明了ViewChild的{​​{1}}对象。 最近7天是默认的选定日期范围。但我在DaterangePickerComponent生命周期挂钩中调用的函数updateDaterange()中将其更新为最近30天。但是，当我导航到子组件并导航回父组件时，我调用了ngAfterViewInit()函数，将日期范围从默认的过去7天更新为了最近30天。但是updateDaterange()的对象变为DaterangePickerComponent，因为视图没有启动而是视图已更改。

总结

首先，我在父页面中。目前，当父页面启动其视图时，我声明了DaterangePickerComponent对象。并使用我的自定义updateDaterange（）函数更改选定的日期范围。到现在为止一切正常。但是，当我导航到子组件并返回到父组件时，之前创建的DaterangePickerComponent对象变得不确定。就是这种情况。

那么我该如何解决。代码如下。

父html文件 `

undefined

父ts文件 `

<div>
   **main block of code**
   
   **injecting Child component**
   <app-child-component (directiveBack)="navigatePage(pageSwitch.ViewPage,$event)"></app-child-component>
   
</div>

`

子ts文件

`

parent class{
    @ViewChild(DaterangePickerComponent) private permissionDaterange: DaterangePickerComponent;
    searchFilter: ExampleInputDto;
    
    constructor(injector: Injector){
        super(injector);
        this.searchFilter = new ExampleInputDto();
        this.searchFilter.fromDate = moment().subtract(30,'days');
        this.searchFilter.toDate = this.appConst.calenderSettings.daterangePickerOptions.toDate; //appConsts holds the constant files used in application.
    }

    ngAfterContentinit(): void {
    }

    ngAfterViewInit(): void {
        updateDaterange();
    }

    updateDaterange(): void {
        this.permissionDaterange.datePicker.setStartDate(this.searchFilter.fromDate.toDate());
        this.permissionDaterange.datePicker.setEndDate(this.searchFilter.toDate.toDate());
    }

    navigatePage(switchEnum: SwitchEnums,data?: any): void {
        if (data) {
            this.searchFilter.fromDate = moment().subtract(30,'days');
            this.searchFilter.toDate = this.appConst.calenderSettings.daterangePickerOptions.toDate;
            this.updateDaterange();
        }
    }
}

`

解决方法

我会尝试使用静态ViewChild：

 @ViewChild(DateRangePickerComponent,{ static: true }) private permissionDateRange: DateRangePickerComponent;
    searchFilter: ExampleInputDto;

对于静态查询（static：true），查询会在视图一次解析 已创建，但在运行更改检测之前。结果， 但是，将永远不会进行更新以反映对视图的更改，例如 更改为ngIf和ngFor块。

通过这种方法，您可以将ngAfterViewInit更改为ngOnInit。