[英]ViewChild returns undefined while returning from child component to parent component
I declared a ViewChild
object of DateRangePickerComponent
.我宣布
ViewChild
的对象DateRangePickerComponent
。 Last 7 Days is the default selected date range.过去 7 天是默认选择的日期范围。 but I Updated it to Last 30 Days in a function
updateDateRange()
whiche is call within ngAfterViewInit()
life cycle hook.但我在
ngAfterViewInit()
生命周期钩子内updateDateRange()
的函数updateDateRange()
中将其更新为过去 30 天。 But when I navigate to a child component and navigate back to parent component I called the updateDateRange()
function to update Date Range from default Last 7 Days to Last 30 Days .但是当我导航到子组件并导航回父组件时,我调用了
updateDateRange()
函数将日期范围从默认的Last 7 Days更新到Last 30 Days 。 But the object of DateRangePickerComponent
becomes undefined
as view does not initiated rather view changed.但是
DateRangePickerComponent
的对象变得undefined
因为视图没有启动而是视图改变了。
In summary总之
First of All I am in the parent page.首先,我在父页面中。 At present when the parent page initiates its view I Declared an object of DateRangePickerComponent.
目前父页面启动视图时我声明了一个DateRangePickerComponent对象。 And Changes the selected date range using my custom updateDateRange() function.
并使用我的自定义 updateDateRange() 函数更改选定的日期范围。 Till now its works fine.
直到现在它的工作正常。 But when I navigate to a child component and come back to the the parent, then the object of DateRangePickerComponent which was created before becomes undefined.
但是当我导航到子组件并返回到父组件时,之前创建的 DateRangePickerComponent 对象变得未定义。 that's the scenario.
这就是情况。
So how can I resolve this.那么我该如何解决这个问题。 Code is given below.
代码如下。
Parent html file `父html文件`
<div>
**main block of code**
**injecting Child component**
<app-child-component (directiveBack)="navigatePage(pageSwitch.ViewPage, $event)"></app-child-component>
</div>
Parent ts file `父 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();
}
}
}
` `
Child ts file子 ts 文件
` `
child class{
@Output() directiveBack: EventEmitter<>;
constructor(){}
navigateBack(): void { //this function is called after clicking back button in child html
this.directiveBack.emit(null)
}
}
` `
I would try using static ViewChild:我会尝试使用静态 ViewChild:
@ViewChild(DateRangePickerComponent, { static: true }) private permissionDateRange: DateRangePickerComponent;
searchFilter: ExampleInputDto;
With static queries (static: true), the query resolves once the view has been created, but before change detection runs.
使用静态查询 (static: true),一旦创建视图,查询就会解析,但在更改检测运行之前。 The result, though, will never be updated to reflect changes to your view, such as changes to ngIf and ngFor blocks.
但是,结果永远不会更新以反映对视图的更改,例如对 ngIf 和 ngFor 块的更改。
Moover you can change ngAfterViewInit
to ngOnInit
in this approach. Moover 您可以在这种方法
ngAfterViewInit
ngOnInit
更改为ngOnInit
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.