Angular2 uygulamasındaki Select2'i tümleştirin

Question

Select2'u, yapıyorum Angular2 uygulamasına tümleştirmeye çalışıyorum. select2'u çalıştırmayı başardım ve çoklu seçimlerim beklendiği gibi dönüştürüldü. Sorunum şimdi seçilen değerleri nasıl alacağım ve hangi olayın ciltleme için kullanmalıyım. Seçme öğesinde (change) olayını bağlamayı denedim, ancak hiçbir şey olmadı. Belki eklenti select2-container öğesinde oluşturulan başka bir olay kullanmalıyım?
select2 eklentisi, this yanıtının ardından entegre edilmiştir.
Benzer karışım deneyen var mı? İşe yarayabilir mi yoksa bunun yerine ng2-select yönergesine geçmek zorunda mıyım?

Güncelleme
Bonus soru :) - Ben select2 vazgeçip kullansanız bile standart seçme birden, nasıl değerini almak gerekir? [(ngModel)]="_selectedValues" ile bir özelliğe bağlamayı denedim ancak herhangi bir seçenek belirlediğimde boş kalır. Çoklu onay kutusu çoklu seçim için tek yol mu? Bonus soru için

Güncelleme 2

- Bulduğum geçici çözüm (change)="selectedValues=$event.target.selectedOptions" gibi bağlayıcı tek yönlü olayını kullanmaktı. Sonra böyle selectedValues özellik için bir setter ekledi:

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

Answer 1

buldum select2 için

tek çalışan çözüm, böyle ngAfterViewInit yönteminde jQuery ile değer elde edilir:

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

Yani benim son kod şöyle görünür:

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

An şablonda d:

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

Umut bu birinin hayatı kurtaracak bir gün :)

Answer 2

Ben parametreler Input gibi seçenekler, değeri ve mevcut öğeleri ile, onun kendi uygulamasını yaptık benim bileşen. Bu benim ilk versiyonum, çok esnek ve kolay bir şekilde arttırılmış olabilir.

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

Ve NG2 seçim gelince o

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