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

我声明了

DateRangePickerComponent

的

ViewChild

对象最后7天是默认选择的日期范围。但我在一个函数中将其更新为最近30天，该函数是在

ngAfterViewInit（）中调用的。但是当我导航到一个子组件并导航回父组件时，我调用了
updatedTerange（）
函数来更新日期范围，从默认的最后7天到最后30天。但是
DateRangePickerComponent
的对象变为
undefined
，因为视图未启动，而视图已更改

总之

首先，我在父页面中。目前，当父页面启动其视图时，我声明了DateRangePickerComponent的对象。并使用my custom UpdateDataRange（）函数更改选定的日期范围。到目前为止，它的效果还不错。但当我导航到一个子组件并返回到父组件时，DateRangePickerComponent的对象（之前创建的）将变得未定义。情况就是这样。

那么我该如何解决这个问题呢。代码如下所示

父html文件
`

`

子ts文件

`

子类{
@Output（）directiveBack:EventEmitter；
构造函数（）{}
navigateBack（）：void{//在子html中单击“上一步”按钮后调用此函数
this.directiveBack.emit（null）
}
}

`
我会尝试使用静态ViewChild：

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

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

不管怎样，您都可以在这种方法中将
ngAfterViewInit
更改为
ngOnInit
。
我以前尝试过静态查询（static:true）。它不能用于
DateRnagePickerComponent
我会尝试通过组件输入而不是ViewChild来设置选项。或者尝试另一个日期选择器，这是一个非常流行的我希望输入而不是
ViewChild
不能解决这个问题。可能是我无法弄清这个情况。首先，我在父页面。目前，当父页面启动其视图时，我声明了一个对象
DateRangePickerComponent
。并使用我的自定义
updateDataRange（）
函数更改选定的日期范围。到目前为止，它的效果还不错。但是当我导航到一个子组件并返回到父组件时，之前创建的
DateRangePickerComponent
的对象将变得未定义。情况就是这样。
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();
        }
    }
}

  child class{
      @Output() directiveBack: EventEmitter<>;

      constructor(){}

      navigateBack(): void {             //this function is called after clicking back button in child html
          this.directiveBack.emit(null)
      }
  }

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