Angular 以编程方式打开启动日历

我使用的是带角度4的Priming组件，但我遇到了一个问题，那就是单击按钮时如何显示日历

看

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}



`,
})
导出类应用程序{
名称：字符串；
值：日期；
@ViewChild（'日历'）
日历：任何；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
openCalendar（事件：任意）{
console.log（事件）；
}
}

我已尝试使用

@ViewChild（'calendar'）

获取模板元素引用。我还尝试过使用

@ViewChild（'calendar#inputfield'）

应用焦点，但这不起作用

---

您知道如何单击按钮以编程方式打开日历吗？

您可以在启动日历时使用

showOverlay

方法

openCalendar(event: any) {
  this.calendar.showOverlay(this.calendar.inputfieldViewChild.nativeElement);
  event.stopPropagation();
}

---

如果我对停止传播进行注释，为什么日历不显示？因为单击事件正在冒泡，并且日历已订阅，代码中的日历链接到按钮的位置？因为我也有同样的问题，但是里面有一个标签calendar@DanyY日历HTML元素通过

@ViewChild（…）

注释和HTML中给出的相应名称（

#calendar

）链接到代码。该按钮调用

openCalendar（event:any）

函数，该函数可通过ViewChild（

this.calendar

）访问日历。

openCalendar(event: any) {
  this.calendar.showOverlay(this.calendar.inputfieldViewChild.nativeElement);
  event.stopPropagation();
}