将Select2集成到Angular2应用程序中

我正在尝试将Select2集成到我正在构建的Angular2应用程序中。 我设法让select2运行，我的多个选择按预期转换。 我现在的问题是如何获取所选值以及我应该使用哪个事件进行绑定。 我尝试在select元素上绑定(change)事件但没有发生任何事情。 也许我应该使用插件select2-container元素创建的其他事件？
此答案后集成了select2插件。
有人试过类似的混合？ 是否有可能让它工作或我必须转而使用ng2-select指令？

更新
奖金问题:) – 即使我放弃了select2并使用标准的多重选择，我该如何获得它的价值？ 我尝试将它绑定到具有[(ngModel)]="_selectedValues"的属性，但是当我选择任何选项时它仍然为空。 多重复选框是多项选择的唯一方式吗？

更新2
对于奖金问题 – 我发现的解决方法是使用单向事件绑定，如(change)="selectedValues=$event.target.selectedOptions" 。 然后我为selectedValues属性添加了一个setter ，如下所示：

 public set selectedValues(value: Array) { this._selectedValues.length = 0; for(let v of value){ this._selectedValues.push(v.value); } }; 

Answer 1

我找到的select2的唯一工作解决方案是在ngAfterViewInit方法中使用jQuery获取值，如下所示：

 jQuery('.fields-select').on( 'change', (e) => this._selectedValues = jQuery(e.target).val() ); 

所以我的最终代码如下所示：

 import {Component, AfterViewInit} from 'angular2/core'; @Component({ selector: 'filters', templateUrl: 'template.html' }) export class FiltersComponent implements AfterViewInit { private _availableFields: Array = ['Value1', 'Value2', 'Value3','Value4']; private _selectedFields: Array = []; ngAfterViewInit(){ jQuery('.fields-select').select2(); jQuery('.fields-select').on( 'change', (e) => this._selectedFields = jQuery(e.target).val() ); }; } 

在模板中：

  {{field}}  

希望有一天能拯救某人的生命:)

Answer 2

我已经自己实现了它，选项，值和可用项目作为我的组件的输入参数。 这是我的第一个版本，它可以非常灵活并且非常容易扩充。

 import { Component, ElementRef, Input, Output, AfterViewInit, EventEmitter, ViewChild } from '@angular/core'; declare var $: any; @Component({ selector: 'custom-select', template: `` }) export class CustomSelectComponent implements AfterViewInit { @ViewChild('select') private select: ElementRef; @Input() items: any[]; @Input() options: any = {}; @Input() value: any; @Output() valueChange = new EventEmitter(); constructor() { } ngAfterViewInit() { let selectElement = $(this.select.nativeElement); if (this.isMultiple()) { selectElement.attr('multiple', true); } selectElement.select2({ data: $.map(this.items, (obj: any) => { let item = { id: this.options.identifier ? obj[this.options.identifier] : obj.id, text: this.options.name ? obj[this.options.name] : obj.name }; if ($.trim(item.id) === '') { console.warn(`No 'id' value has been set for :`, obj); } if ($.trim(item.text) === '') { console.warn(`No 'name' value has been set for :`, obj); } return item; }) }); $(selectElement).val(this.value).trigger('change'); selectElement.on('change', (e: any) => { this.valueChange.emit($(e.target).val()); }); }; private isMultiple() { return !!(this.options && this.options.multiple === true); } } 

你可以这样称呼它