ng-clock-picker-lib-voova 是一个基于 Angular 的时间选择器组件库，可以帮助开发者快速地构建时间选择器。本文将介绍如何使用该组件库，在其中加入自定义样式，并给出实例代码供参考。
安装与引入
在使用该组件库前，需要先安装 Angular，以及 TypeScript 的支持。具体安装方法可以参考 Angular 官方文档 https://angular.io/guide/setup-local 。安装完成后，可以使用 npm 命令来安装 ng-clock-picker-lib-voova：
npm install ng-clock-picker-lib-voova
之后在需要使用该组件库的组件中引入：
import { NgClockPickerModule } from 'ng-clock-picker-lib-voova';
@NgModule({
imports: [ NgClockPickerModule ]
})
export class MyModule { }基本使用
该组件库提供了两种样式：默认样式和简约样式。默认样式是一个圆形时间选择器，简约样式则是一个长条状的时间选择器。下面分别介绍这两种样式的使用方法：
默认样式
在需要使用默认样式的组件中，使用 NgClockPickerDefault 组件即可。该组件可以接收一个默认时间作为起始时间，并且支持修改时间。
<ng-clock-picker-default [defaultTime]="myTime" (timeChange)="onTimeChange($event)"></ng-clock-picker-default>
其中，defaultTime 是一个 Date 对象，表示默认起始时间，timeChange 是一个事件，表示时间变化时的回调函数。
简约样式
在需要使用简约样式的组件中，使用 NgClockPickerSimple 组件即可。该组件同样可以接收一个默认时间作为起始时间，并支持修改时间。
<ng-clock-picker-simple [defaultTime]="myTime" (timeChange)="onTimeChange($event)"></ng-clock-picker-simple>
同样，defaultTime 是一个 Date 对象，表示默认起始时间，timeChange 是一个事件，表示时间变化时的回调函数。
自定义样式
默认情况下，组件库提供了两种预设样式。但是在实际开发中，往往需要对样式进行自定义。以默认样式为例，我们可以通过修改 CSS 来更改样式。
组件库提供了 ng-clock-picker-default 和 ng-clock-picker-simple 两个组件，同时也提供了它们对应的 CSS 选择器。比如，默认样式中，时间选择器整体的 CSS 选择器为 .ng-clock-picker-default ，可以通过修改它来达到自定义样式的效果。
下面是一个自定义样式的实例，它将时间选择器的背景色修改成了红色：
.ng-clock-picker-default {
background-color: red;
}总结
本文介绍了 ng-clock-picker-lib-voova 这个时间选择器组件库的使用方法，以及如何自定义样式。希望可以对开发者们有所指导作用。相关示例代码请看以下链接：
https://github.com/voova/ng-clock-picker-lib-voova
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e50520b171f02e1def