如何在Angular 6中使用select2？

Question

我需要在角度6中使用“ select2”来实现自动完成。谁曾经使用过它？ ，请帮帮我。

Answer 1

以防万一其他人降落在这里。用于Select2的角度包装器有很多分支，但它们都相当大，并且同时需要JQuery（1.32MB）和Select2（839kB）。

如果您对Select2的简化克隆（纯角度无任何依赖性）感兴趣，可以尝试以下方法：

https://github.com/timbophillips/angular-components-workspace/tree/master/projects/filtered-select

https://www.npmjs.com/package/filtered-select

花更少的时间，但是出于我的目的，我真的只想要可搜索的选择控件。

将其安装为npm模块（16.2kB）或使用源代码。它在没有Ivy的情况下进行编译，因此它可以在新旧的角度项目中使用。

Answer 2

您可以使用ng2-select2

Angular wrapper for Select2 (ng2-select2)

Answer 3

1。如果您正在使用引导程序，请使用引导程序的预输入功能

https://ng-bootstrap.github.io/#/components/typeahead/examples

2。如果有实质意义，则使用自动完成

https://material.angular.io/components/autocomplete/examples

Answer 4

您可以通过两种方式完成此操作

  

情况1：通过添加Id来选择标签，使用jQuery

<select select2 style="width:100%;" class="select2" id="symbolId" [(ngModel)]="selectedContractDetails.name">
        <option *ngFor="let symbol of service.symbols" value="{{symbol}}">{{symbol}}</option>
    </select>

在您的ngAfterViewInit()

ngAfterViewInit(){
   $('#symbolId').on('change', (event) => {
       var symbolSelected= event.target.value;
       //you can use the selected value
   });
}

  

情况2：使用JQuery和select2 Official Library methods

ngAfterViewInit(){
   $('.select2').on('select2:select', (event) => {
       // Code you want to execute when you hit enter in select2 input box   
   });
}

Answer 5

1. 导入select2插件的js和css

2. 创建指令

import { AfterViewInit, Directive, ElementRef } from '@angular/core';
declare var $;
@Directive({
  selector: '[appSelect2]'
})
export class Select2Directive implements AfterViewInit {

  constructor(private element: ElementRef) { }
  ngAfterViewInit(){
    this.element.nativeElement.focus();
    $(this.element.nativeElement).select2();
    $(this.element.nativeElement).select2({
      theme: 'bootstrap4'
    });
  }
}

3. 使用

<select appSelect2 class="select2" multiple="multiple" data-placeholder="Select a State" style="width: 100%;">
    <option>Alabama</option>
    <option>Alaska</option>
    <option>California</option>
    <option>Delaware</option>
    <option>Tennessee</option>
    <option>Texas</option>
    <option>Washington</option>
</select>