2017-12-20 12 views
0

각도가있는 plnkr을 설정하려고하는데 데모에서 ng-selectize를 설치하고 구성해야합니다. 내 plnkr에 npm 패키지 ng-selectize를 어떻게 추가합니까?npm 패키지 (ng-selectize)를 plunker 각 데모에 추가하고 구성하려면 어떻게합니까?

import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { NgSelectizeModule } from 'ng-selectize'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <ng-selectize [config]="config" [optgroups]="optgroups" [options]="options"></ng-selectize> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    config = { 
     highlight: false, 
     create: false, 
     persist: true, 
     plugins: ['dropdown_direction', 'remove_button'], 
     dropdownDirection: 'down', 
     optgroupField: 'group', // Name of the property to group items by. 
     optgroupLabelField: 'label', // Name of the property to render as an option group label. 
     labelField: 'label', 
     valueField: 'value', 
     maxItems: 1000 
    } 

    optgroups = [ 
    { 
     group: 'colors', 
     label: 'colors' 
    }, 
    { 
     group: 'animals', 
     label: 'animals' 
    } 
    ]; 

    options = [ 
    { 
     label: 'Red', 
     value: 'red', 
     group: 'colors' 
    }, { 
     label: 'Blue', 
     value: 'blue', 
     group: 'colors' 
    }, { 
     label: 'Green', 
     value: 'green', 
     group: 'colors' 
    }, { 
     label: 'Dog', 
     value: 'dog', 
     group: 'animals' 
    } 
    ]; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, NgSelectizeModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

http://plnkr.co/edit/msFyhztaC0YP1q6wADKq

은 내가 config.js에 추가했다 또 다른 유래 응답을 따라하지만 난 lodash가 오류를 발견하지 clonedeep 얻고있다.

+0

SystemJs에 https 라이브러리를 사용하여 몇 가지 합병증이있는 것 같습니다 : //가 github.com/NicholasAzar/ng-selectize/issues/28 – JayChase

+0

각도 또는 반응으로 인해 plunkr과 jsfiddle이 죽습니다 ... https://stackblitz.com/ – FRECIA

+0

stackblitz를 시도했지만'.angular-cli.json'을''styles ''로 업데이트하면 문제가있는 것 같습니다 : stackblitz를 사용하여 패키지를 설치 했더라도 [ "styles.css", "../ node_modules/selectize/dist/css/selectize.css"는 파일을 찾을 수 없다고 말합니다. 정상적인 node_modules 경로가 있습니까? – MonkeyBonkey

답변

0

config.js

map: { 
    ..., 
    'ng-selectize': 'npm:ng-selectize', 
    'lodash.clonedeep': 'npm:lodash.clonedeep' 
} 

index.html을

<link rel="stylesheet" href="https://unpkg.com/selectize/dist/css/selectize.css" /> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/selectize.bootstrap3.css" /> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://unpkg.com/ng-selectize/selectize/selectize.standalone.js"></script> 

Plunker Example