在自定义组件中包装 ng-bootstrap datepicker

Question

我们正在使用 ng-bootstrap 组件库 Angular 2.

我们希望将 ngb-datepicker 包裹在新组件中的不同选择器下。这样它就可以在需要时与另一个日期选择器交换。

基本上，我们想使用， <custom-datepicker> 而不是 <ngb-datepicker> 该组件将具有相同的输入集。

完成此操作的一种方法是将保留在自定义组件中。并传递来自组件的输入。

@Component({
selector: 'custom-datepicker',
template: '<uib-datepicker ...pass the inputs here ></uib-datepicker>',
})

有没有更好的方法来实现这个？

Answer 1

您需要实施 ControlValueAccessor 才能将 [(ngModel)] 与您的自定义日期选择器一起使用。您可以找到很多教程，尝试找到一个不太旧的教程（> 2016 年 8 月），因为它自测试版以来已经发生了很大变化。

然后，您需要定义您的自定义组件需要如何反应，然后将您需要的所有内容绑定到内部控件（在您的例子中是 uib-datepicker）。

这意味着：

Wrapping ng-bootstrap datepicker in custom component