Select2とAngular2 Componentsを統合する例はありますか？

Question

私は、Select2を角度2のコンポーネントに統合する方法のデモンストレーション/例を見つけようとしています。

私の最終目標は、私がhttps://select2.github.io/examples.html#data-ajax

は、これまでのところ、私のGoogle忍者の力が私を失敗した:(の

失敗例を別名選択ボックスに入力し始めると、ドロップダウンを移入するために選択2つのAJAX機能を使用することですSELECT2統合は...他の提案がありますか？私の目的はSELECT2を初期化し、許可するように_ngcontent-属性を追加した

Answer 1

私はSELECT2を動作するようになった方法を見てみましょう。

乾杯私のスコープでscssを使ってスタイルを設定してください。

HTML：ngAfterViewInit上の活字体で

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

INIT：

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

Angular2でSelect2マルチドロップダウンサンプルを検索したところ、私が探していた種類のものを見つけることができませんでした。 Googleの忍者力がうまくいかないことがあります。私はそれを自分で書かなければならなかった。しかし、私はそれを共有し、Googleの忍者にこれをもう一度パワーダウンさせてはいけないと思った。 :)

plunker here to see the working demo

本のコアは、角度成分でSELECT2をラップすることです。

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