Question

我声明了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();
        }
    }
}

`

Answer 1

我会尝试使用静态ViewChild：

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

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

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

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

1 个答案: