angular 2 - 制作模块化日期选择器组件

Question

我一直在阅读有关嵌入的内容，我正在尝试确定是否需要这样做才能制作可以放置在任何地方的弹出选择器服务。

因为 ngx-bootstrap 还不支持模态日期选择器，所以我正在制作自己的。 我在整个应用程序中有多个日期选择器，甚至在同一页面上有几个，所以我希望它尽可能模块化。

我从标准日期输入开始：

<input 
    type="date" 
    class="form-control" 
    (click)="pickDate($event, '#requestDate')" />

目前，我的日期选择器就在页面中（绝对定位，所以它的行为就像一个弹出窗口）：

<datepicker 
    id="requestDate" 
    name="requestDate" 
    [(ngModel)]="incident.absence.requestDate" 
    required></datepicker>

...但我希望我的服务能够按需生成。

目前的方法：

pickDate(e, popupId) {
    e.preventDefault();
    var popupCtrl = this.elementRef.nativeElement.querySelector(popupId);
    popupCtrl.style.display= 'block';
}

输入和日期选择器之间将进行大量通信，来回传递初始化和修改日期。据推测，simple transclusion 是不够的。

在我的页面上生成控件的服务如何工作？

（或者我在这里重新发明轮子？）

Answer 1

虽然您可以为 datepicker 编写自己的包装器，但这听起来比您需要做的工作更多。听起来您已经在使用 ngx-bootstrap，所以如果您真的想要自定义日期选择器，我只需将日期选择器放在他们提供的下拉菜单或工具提示控件中即可。

实际上，我会使用primeng的日期选择器：https://www.primefaces.org/primeng/#/calendar

您使用多个 ui 框架（primeng 和 ngx-bootstrap）应该无关紧要，因为大多数膨胀应该在您的 prod 构建中消除。