将 Select2 与 Angular2 组件集成的任何示例

Question

我一直在尝试找到如何将 Select2 集成到角度 2 组件中的演示/示例。

我的最终目标是在我开始在选择框中键入时，使用 2 个 ajax 功能来填充下拉列表，又名 https://select2.github.io/examples.html#data-ajax

到目前为止，我的谷歌忍者能力让我失望了:(

select2 集成的失败示例...还有其他建议吗？

Answer 1

当我开始在 Angular2 中寻找 Select2 多下拉示例时，我找不到我想要的那种。我意识到有时谷歌忍者的力量不起作用。我必须自己写。但是，我想分享它，不要为此再次让谷歌忍者断电。:)

在这里查看工作演示

其核心是将 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();
  }
}

Answer 2

让我们看看我是如何开始使用 select2 的。我的目的是初始化 select2 并添加 _ngcontent- 属性以允许在我的范围内通过 scss 设置它们的样式。

目录：

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

它只是为了设置输入元素的样式。对于动态添加的元素(选择、选择器(，您可能需要捕获一些事件并再次执行魔术。