Question

我正在尝试设置一个带角度的plnkr，需要在演示中安装和配置ng-selectize。如何在我的plnkr中添加npm包ng-selectize？

http://plnkr.co/edit/msFyhztaC0YP1q6wADKq

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 {}

我跟着另一个stackoverflow回答说，将其添加到config.js但是我找不到lodash clonedeep错误。

Answer 1

<强> 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/selectize@0.12.4/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

如何在一个plunker角度演示中添加和配置npm包（ng-selectize）？

1 个答案: