web-dev-qa-db-ja.com

Select2をAngular2コンポーネントと統合する例はありますか？

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

私の最終目標は、選択ボックスに入力を開始するときに、select 2 ajax機能を使用してドロップダウンにデータを入力することです https://select2.github.io/examples.html#data-ajax

これまでのところ、私のグーグル忍者の力は私を失敗させました:(

Select2統合の失敗例...他に何か提案はありますか？

angularjquery-select2angularjs-select2
9
andycwk

Angular2でSelect2マルチドロップダウンの例を探し始めたとき、探していた種類のものが見つかりませんでした。グーグル忍者パワーが効かないことがあることに気づきました。私はそれを自分で書かなければなりませんでした。しかし、私はそれを共有し、これのためにグーグル忍者を再びパワーダウンさせないように考えました。 :)

実際のデモを見るにはここにプランカーがあります

この中核は、select2をangularコンポーネントでラップすることです。

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

Select2をどのように動作させたかを見てみましょう。私の目的は、select2を初期化し、_ngcontent-属性を追加して、スコープ内のscssを介してスタイルを設定できるようにすることでした。

HTML：

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

ngAfterViewInitのTypeScriptで初期化：

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

入力要素のスタイルを設定するためだけに作成されています。動的に追加された要素（選択、セレクター）の場合、おそらくいくつかのイベントをキャッチして、魔法をもう一度実行する必要があります。

0
prespic