如何访问ng-template中的元素？ （角度5）

Question

我使用ngBootstrap库在程序中创建日期选择器。 html文件如下所示：

<button class="btn btn-secondary" [ngbPopover]="popDate" popoverTitle="Date" placement="bottom">
    {{ my_date_string }}
</button>

<ng-template #popDate>
    <ngb-datepicker #popDatePicker [(ngModel)]="my_date_struct"></ngb-datepicker>
</ng-template>

它可以工作，但是当用户单击按钮并打开对话框时，我想导航到当前月份。为此，我需要在.navigateTo()元素上调用ngb-datepicker。

不幸的是@ViewChild('popDatePicker')在ngOnInit上是未定义的，所以我在按钮的onclick方法中尝试过：

 (click)="popDatePicker.navigateTo()"

但是我得到这个错误：

Cannot read property 'navigateTo' of undefined

如何解决此错误？在模板实例化时，我必须以某种方式调用函数，但是我不知道如何。

---

修改

我可以在setTimeout事件处理程序中的click调用中找到该元素，但这似乎并不是解决问题的绝妙方法。

Answer 1

我可以猜测单击按钮时仍未呈现弹出窗口。尝试以下操作：

在标记中：

(click)="btnClick()"

在组件中：

constructor(private cd: ChangeDetectorRef) {}

btnClick(): void {
   setTimeout(() => { 
     this.popDatePicker.navigateTo();
     this.cd.markForCheck();
   });
}