Любые примеры интеграции Select2 с компонентами Angular2?

Question

Я пытался найти демонстрацию/пример того, как интегрировать Select2 в угловой компонент 2.

Моей конечная цель заключается в использовании функции выберите 2 Ajax для заполнения раскрывающегося списка, как я начинаю набирать в окне выбора ака https://select2.github.io/examples.html#data-ajax

До сих пор мои ниндзя силы Google не удались меня :(

неудовлетворительных примеров интеграция выбор2 ... есть ли другие предложения?

Приветствие

Answer 1

Давайте посмотрим, как я должен работать ВЫБ.2. Моя цель была инициализировать ВЫБ.2 и добавить атрибут _ngcontent-, чтобы чтобы стилизовать их через scss в моем объеме.

Html:

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

Init в Машинопись на ngAfterViewInit:

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

И специальные функции магии, чтобы клонировать атрибут к Чайлдс _ngcontent. Очень полезно для многих третьих сторон библиотек, где генерируются некоторое динамическое содержание:

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

Это сделано только для стилизации входного элемента. Для динамически добавленных элементов (выбор, селектор) вам, вероятно, придется поймать некоторые события и снова сделать магию.

Answer 2

Когда я начал свою охоту за Select2 multi drop-down в Angular2, я не мог найти тот, который я искал. Я понял, что некоторая сила власти ниндзя Google не работает. Я должен был написать это сам. Однако я решил поделиться этим и не позволить власти ниндзя Google снова за это. :)

plunker here to see the working demo

Ядро это обернуть ВЫБ.2 в угловой компоненте.

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