Dowolne przykłady integracji Select2 ze składnikami Angular2?

Question

Próbowałem znaleźć demonstrację/przykład, jak zintegrować Select2 w kątowy 2 składnik.

mój koniec celem jest wykorzystanie wybierz 2 funkcje AJAX do wypełnienia listy rozwijanej jak zacznę pisać w polu wyboru aka https://select2.github.io/examples.html#data-ajax

Dotychczas moje moce ninja Google nie udało mi :(

upadających przykłady integracja select2 ... czy są jakieś inne sugestie?

Cheers

Answer 1

Niech zobaczyć, jak mam do pracy select2. Moim celem było init select2 i dodać atrybut _ngcontent-, aby umożliwić nadać im styl w moim zasięgu.

HTML:

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

Init w maszynopisie na ngAfterViewInit:

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

I specjalne funkcje magiczne sklonować przypisują Childs _ngcontent. Bardzo przydatne w przypadku wielu bibliotek zewnętrznych, w których generowana jest pewna zawartość dynamiczna:

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

Została stworzona po to, aby styl elementu wejściowego. W przypadku dynamicznie dodawanych elementów (selekcji, selektora) prawdopodobnie będziesz musiał złapać niektóre z wydarzeń i ponownie wykonać magię.

Answer 2

Kiedy zacząłem polować na przykład w multi-drop Select2 w Angular2, nie mogłem znaleźć tego, którego szukałem. Zdarzyło mi się zdawać sobie sprawę, że czasami moc Google ninja nie działa. Musiałem to napisać sam. Pomyślałem jednak, że mogę go udostępnić i nie pozwolić ponownie ninja Google ninja. :)

plunker here to see the working demo

Rdzeń jest zawijany select2 w kątowym elementu.

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