在Angular 6中,可以使用Angular Material来创建一个预定义颜色的颜色选择器。下面是一个示例的解决方法:
npm install --save @angular/material @angular/cdk @angular/animations
app.module.ts
文件中,将以下代码添加到imports
数组中:import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatIconModule, MatInputModule, MatSelectModule } from '@angular/material';
@NgModule({
imports: [
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatSelectModule
],
exports: [
MatButtonModule,
MatIconModule,
MatInputModule,
MatSelectModule
]
})
export class AppModule { }
mat-select
和mat-option
来创建一个颜色选择器。以下是一个示例的组件模板:
Primary
Accent
Warn
ngModel
指令。以下是一个示例的组件代码:import { Component } from '@angular/core';
@Component({
selector: 'app-color-picker',
template: `
Primary
Accent
Warn
你选择的颜色是: {{ selectedColor }}
`
})
export class ColorPickerComponent {
selectedColor: string;
}
ColorPickerComponent
。
这样就可以创建一个预定义颜色的颜色选择器,并且可以获取所选颜色的值。
上一篇:Angular 6与chart.js TypeError: item is null错误
下一篇:Angular 6与Fusioncharts - 模块未找到: 错误: 无法解析fusionmaps/maps/fusioncharts.world