angular2 中的颜色选择器 [英] Colour picker in angular2

问题描述

我想在 angular2 中使用颜色选择器.我尝试使用 npm angular2-color-picker 库.但是在包含指令后我只能看到一个空白屏幕.(在控制台中没有发现错误).请帮助我知道我哪里出错了，或者让我知道是否有任何其他 angular2 库可用于颜色选择.提前致谢.

我的 HTML 包括:

<label>主要</label><input [(colorPicker)]="color" [style.background]="color" [value]="color"/>

我的 TS:(AppComponent 页面路由到 DesignPage)

import {Component, OnInit} from 'angular2/core';从'angular2-color-picker/app/color-picker/color-picker.directive'导入{ColorPickerDirective}；@成分({选择器:'我的设计'，templateUrl: 'wwwWeb/build/component/design/design.html',指令:[ColorPickerDirective]})导出类 DesignPage 实现 OnInit {私有颜色:string = "#127bdc";}

我的 Boot.ts

import {bootstrap} from 'angular2/platform/browser';从 './app.component' 导入 {AppComponent}；从 './color-picker/color-picker.service' 导入 {ColorPickerService}bootstrap(AppComponent, [ColorPickerService]);

我的 Tsconfig

<代码>{编译器选项":{"目标": "es5","module": "commonjs","moduleResolution": "节点","sourceMap": 真,emitDecoratorMetadata":真，"experimentalDecorators": 真,删除评论":假，"noImplicitAny": 假},排除": ["../node_modules","打字/主要",打字/main.d.ts"]}

解决方案

你需要这样配置库:

System.config({地图: {'angular2-color-picker': 'node_modules/angular2-color-picker'},包:{(……)'angular2-颜色选择器':{格式:'注册'，默认扩展:'js'}}});

I want to use a color picker in angular2. I tried using npm angular2-color-picker library. But i could see only a blank screen after including the directive. (No error found in console). Please help me by knowing where i am going wrong or let me know whether there is any other angular2 library available for color picking.Thanks in advance.

My HTML includes:

<div>
<label>Primary</label>
<input [(colorPicker)]="color" [style.background]="color" [value]="color"/>
</div>

My TS: (AppComponent page routes to DesignPage)

import {Component, OnInit} from 'angular2/core';
import {ColorPickerDirective} from 'angular2-color-picker/app/color-picker/color-picker.directive';
@Component({
    selector: 'my-design',
    templateUrl: 'wwwWeb/build/component/design/design.html',
    directives: [ColorPickerDirective]
})
export class DesignPage implements OnInit {
 private color: string = "#127bdc";
}

My Boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ColorPickerService} from './color-picker/color-picker.service'

bootstrap(AppComponent, [ColorPickerService]);

My Tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "../node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

解决方案

You need to configure the library this way:

System.config({
  map: {
    'angular2-color-picker': 'node_modules/angular2-color-picker'
  },
  packages: {
    (...)
    'angular2-color-picker': {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

这篇关于angular2 中的颜色选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！