javascript - 如何访问 ng-template 中的元素？ ( Angular 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>

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

不幸的是@ViewChild('popDatePicker')在ngOnInit上没有定义，所以我在按钮的onclick方法中试了一下:

 (click)="popDatePicker.navigateTo()"

但是我得到这个错误:

Cannot read property 'navigateTo' of undefined

如何解决这个错误？当模板被实例化时，我必须以某种方式调用一个函数，但我不知道如何调用。

---

编辑

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

Answer 1

我可以猜到当您单击按钮时弹出窗口尚未呈现。尝试以下操作:

在标记中:

(click)="btnClick()"

在组件中:

constructor(private cd: ChangeDetectorRef) {}

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