将 Select2 集成到 Angular2 应用程序中

Question

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

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

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

public set selectedValues(value: Array<any>) {
    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<any> = ['Value1', 'Value2', 'Value3','Value4'];
    private _selectedFields: Array<string> = [];

    ngAfterViewInit(){
        jQuery('.fields-select').select2();
        jQuery('.fields-select').on(
            'change',
            (e) => this._selectedFields = jQuery(e.target).val()
        );
    };
}

并在模板中：

<select id="fields" class="form-control fields-select" multiple="multiple">
    <option *ngFor="#field of _availableFields" [value]="field">{{field}}</option>
</select>

希望有一天这会挽救某人的生命:)

Answer 2

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

import { Component, ElementRef, Input, Output, AfterViewInit, EventEmitter, ViewChild } from '@angular/core';
declare var $: any;

@Component({
    selector: 'custom-select',
    template: `<select #select class="form-control"></select>`
})

export class CustomSelectComponent implements AfterViewInit {
    @ViewChild('select') private select: ElementRef;
    @Input() items: any[];
    @Input() options: any = {};
    @Input() value: any;
    @Output() valueChange = new EventEmitter<string[]>();

    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);
    }
}

你可以这样称呼它

<custom-select [items]="array" [options]="{multiple:true}" (valueChange)="update($event)" [value]="valueVar"></custom-select>

将 Select2 集成到 Angular2 应用程序中

Integrate Select2 into the Angular2 app

jquery

jquery-select2

typescript

angular