本文将介绍如何使用 npm 包 ng-color 进行 Angular 前端项目的颜色管理。ng-color 是一个基于 Angular Material 的颜色选择器组件，能够让你轻松地选择和管理你的项目中所使用的颜色。
安装 ng-color
使用 npm 命令进行安装
npm install ng-color
引入 ng-color
在你的 app.module.ts 中导入 ng-color 模块。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ----------- ----------- --- -------- ---------------- --- -- ------ ----- --------- - -
使用 ng-color
使用 ng-color 的方式非常简单，你只需要在你的模板中引入 ng-color 组件，并将其包裹在任何你想要管理的颜色单元上。
<ng-color [(ngModel)]="primaryColor"></ng-color>
在上述代码中，我们只是简单地将 ng-color 组件包裹在了一个 ngModel 指令中，这样 primaryColor 变量就会自动与 ng-color 组件绑定起来。
支持的选项
ng-color 提供了许多不同的选项来让你定制你的颜色选择器。
color
你可以通过设置 color 属性来初始化颜色选择器中的颜色。这里的颜色可以是任何有效的 CSS 颜色值。
<ng-color [(ngModel)]="primaryColor" color="#0097A7"></ng-color>
mode
mode 属性可以设置颜色选择器的模式。默认情况下，这个值为 default，但还有其他可用值：
simple：仅显示颜色标记。palette：仅显示调色板条目。both：显示颜色标记和调色板条目。
<ng-color [(ngModel)]="primaryColor" mode="simple"></ng-color>
disabled
如果你想要在某些情况下禁用颜色选择器，你可以设置 disabled 属性为 true。
<ng-color [(ngModel)]="primaryColor" disabled="true"></ng-color>
事件
与任何 Angular 表单控件一样，当在 ng-color 组件中选择一个新颜色时，一个 ngModelChange 事件将被发射出去，你可以监听它并获取所选颜色的值。
<ng-color [(ngModel)]="primaryColor" (ngModelChange)="onColorChange($event)"></ng-color>
onColorChange(color: string) {
console.log(color);
}ng-color 的深度意义
ng-color 不仅仅是一个简单的颜色选择器组件，它还能够让你更好地管理你的项目颜色，这对于大型项目来说尤其有意义。
使用 ng-color，你可以在你的项目中定义和标准化一组颜色，然后在你的模板和样式表中使用它们，这将会使得你的代码更具可维护性和可读性。
以下是一个示例，展示如何在项目中使用 ng-color 定义和管理颜色。
定义颜色
在你的 app.module.ts 中定义一个常量数组来包含你的项目中所有的颜色。
const projectColors = [
{ name: 'primary', hex: '#0097A7' },
{ name: 'accent', hex: '#FF6F00' },
{ name: 'warn', hex: '#FF4081' },
]导出颜色
如果你想要在你的组件和服务中使用这些颜色，你可以将它们导出为一个 Angular InjectionToken。
import { InjectionToken } from '@angular/core';
export const ProjectColors = new InjectionToken('ProjectColors');
export const projectColors = [
{ name: 'primary', hex: '#0097A7' },
{ name: 'accent', hex: '#FF6F00' },
{ name: 'warn', hex: '#FF4081' },
];在你的 app.module.ts 中，将这个 InjectionToken 实例化为一个供应商，并将它导出。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ----------- ------ - -------------- ------------- - ---- ------------------- ----------- --- ---------- -- -------- -------------- --------- ------------- --- --- -- ------ ----- --------- - -
这样，当你在你的组件和服务中使用 ProjectColors 时，Angular 将会自动注入你的颜色数组。
使用颜色
现在，你可以在你的模板和样式表中使用你的颜色来使你的代码更具可读性和可维护性。
<!-- 模板中 -->
<button mat-raised-button color="{{ projectColors[0].name }}">{{ projectColors[0].name }}</button>
<!-- 样式表中 -->
.example-class {
background-color: var(--project-primary);
}这里，我们在一个 Angular Material 按钮上使用了我们的 primary 颜色，以及在 CSS 中使用了 --project-primary 来使用这个颜色。
结论
ng-color 不仅仅是一个方便的颜色选择器，它还提供了强大的工具来管理你的项目中使用的颜色。使用 ng-color，你可以减少代码中的硬编码颜色，提高了在项目中使用颜色的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a430d0927023822411