Select2'yi Angular2 Bileşenleri ile tümleştirme örnekleri

Question

Select2'nin bir açısal 2 bileşenine nasıl entegre edileceğine dair bir örnek/örnek bulmaya çalışıyorum.

Benim nihai hedef ben seçme kutusunda aka https://select2.github.io/examples.html#data-ajax

Şimdiye kadar Google ninja güçler başarısız olmuş bana :(

Başarısız örnekler yazmaya başlar başlamaz açılan doldurmak için seçme 2 ajax özelliklerini kullanmaktır Select2 entegrasyonu ... başka öneri var mı? Amacım Select2 init ve izin _ngcontent- öznitelik eklemek edildi

Answer 1

i Select2 çalışmak lazım bakalım.

Alkış benim kapsamımda scss ile onları stil. ngAfterViewInit daktilo harfleri ile

<select multiple="multiple" style="display: none;"> 
    <option *ngFor="#item of people" [value]="item.id"> 
     {{item.name}} 
    </option> 
</select> 

Init:

Html

ngAfterViewInit() 
{ 
    var element = (<any>$('select')).select2().siblings('.select2-container')[0]; 
    var attribute = ObjectHelper.setElementContentAttribute(this.m_elementRef.nativeElement, element, true); 
} 

Ve özel sihirli işlevleri oğul _ngcontent niteliğini klonlamak. Bazı dinamik içerik oluşturulur 3. parti kütüphaneleri, bir sürü için çok yararlıdır:

public static getAngularElementTag(element: Element): string 
{ 
    var attrs = [].filter.call(element.attributes, at => /^_nghost-/.test(at.name)); 
    if (attrs.length == 0) 
    { 
     return null; 
    } 
    return attrs[0].name.replace("_nghost-", "_ngcontent-"); 
} 


public static setElementContentAttribute(hostElement: Element, targetElement: Element, setRecursive?: boolean): string 
{ 
    var attribute = this.getAngularElementTag(hostElement); 
    setRecursive = (setRecursive !== undefined) ? setRecursive : false; 
    if (attribute !== null) 
    { 
     this._setElementContentAttribute(targetElement, setRecursive, attribute); 
     return attribute; 
    } 
    else 
    { 
     return null; 
    } 
} 

private static _setElementContentAttribute(targetElement: Element, recursive: boolean, attribute) { 
    targetElement.setAttribute(attribute, ''); 
    if (recursive) { 
     for (var i = 0; i < targetElement.childElementCount; i++) { 
      this._setElementContentAttribute(<Element>targetElement.childNodes[i], recursive, attribute); 
     } 
    } 
} 

Sadece giriş elemanı stil yapılmış. Dinamik olarak eklenen elemanlar (seçimler, seçici) için muhtemelen bazı olayları yakalamanız ve sihri tekrar yapmanız gerekir.

Answer 2

Angular2'de Select2 çoklu aşağı açılan örneği için avlamaya başladığımda, aradığım türde bir şey bulamadım. Bazı zamanlarda Google ninja gücünün çalışmadığını fark ettim. Kendim yazmalıydım. Ancak bunu paylaşmayı düşündüm ve Google ninja'nın bunun için tekrar güç kullanmasına izin vermeyeceğim. :)

plunker here to see the working demo

bu çekirdek açısal bileşen Select2 sarılmasıdır.

export class DummySelect { 
    constructor(private id: string){ 
    $(id).select2({ 
     width: '100%', 
     ajax: { 
     url: 'https://api.github.com/search/repositories', 
     datatype: 'json', 
     delay: 250, 
     data: function(params: any){ 
      return { 
      q: params.term 
      }; 
     }, 
     processResults: function(data:any, params: any){ 
      return { 
      results: 
       data.items.map(function(item) { 
       return { 
        id: item.id, 
        text: item.full_name 
       }; 
       } 
      )}; 
      }, 
     cache: true 
     }, 
     placeHolder: 'Search...', 
     minimumInputLength: 2 
    }) 
    } 

    getSelectedValues(private id: string){ 
    return $(id).val(); 
    } 
}