UI选择的Angular2中的替换

Question

我们正在将现有的Angular1项目移至Angular2，并希望替换现有的ui-select组件。

我已经谷歌搜索，但找不到Angular2的ui-select版本。

有人找到了更好的选择吗？

Answer 1

Primeng的下拉或多选择性可能会有所帮助。

http://www.primefaces.org/primeng/#/dropdown

或

http://www.primefaces.org/primeng/#/multiselect

Answer 2

ng2-select会做一些。但它不支持动态数据绑定。

实际上，几乎没有针对Angular实施的第三方插件。

Answer 3

如果有人迁移到ng2并需要运行混合应用程序（同时运行ng1和ng2-现在分别称为angularjs和angularjs和Angular）使用NG1组件（例如UI-SELECT）在NG2组件模板中使用。我们已经通过UI选择成功地完成了此操作，并且效果很好。特别是，查看@Directive注释绑定。

import {Directive, ElementRef, Injector, Input} from '@angular/core';
import {UpgradeComponent} from '@angular/upgrade/static';
import {module, IComponentOptions} from 'angular';
class UiSelectComponent implements IComponentOptions {
  public bindings: any = {
    items: '<',
    model: '<',
    modelProperty: '@',
    placeholder: '@',
    renderProperty: '@',
    selectProperty: '@'
  };
  public template = `
    <ui-select ng-model="$ctrl.model[$ctrl.modelProperty]" class="form-control input-sm" required>
      <ui-select-match placeholder="{{$ctrl.placeholder}}">{{$select.selected[$ctrl.renderProperty]}}</ui-select-match>
      <ui-select-choices repeat="item[$ctrl.selectProperty] as item in $ctrl.items | filter: $select.search">
        {{item[$ctrl.renderProperty]}}
      </ui-select-choices>
    </ui-select>
  `;
}
const selector = 'uiSelectWrapper';
export const UI_SELECT_COMPONENT = 'spinnaker.core.widget.uiSelect.component';
module(UI_SELECT_COMPONENT, []).component(selector, new UiSelectComponent());
@Directive({
  selector: 'ui-select-wrapper'
})
export class UiSelectComponentDirective extends UpgradeComponent {
  @Input()
  public items: any[];
  @Input()
  public model: any;
  @Input()
  public modelProperty: string;
  @Input()
  public placeholder: string;
  @Input()
  public renderProperty: string;
  @Input()
  public selectProperty: string;
  constructor(elementRef: ElementRef, injector: Injector) {
    super(selector, elementRef, injector);
  }
}

Answer 4

请检查ng-select。它具有单个选择，多选，搜索自动完成，标签，分组以及上述虚拟滚动。我希望这可能会有所帮助。

Answer 5

对于专门为Angular 2开发的组件，请参见Angular 2的Kendo UI的下拉套件。它仍然在Beta中，欢迎反馈。

Answer 6

你看过NG2选择的NGX选择叉。NGX-Select-EX具有单个选择，多选择，张紧，模糊事件，例如Select2。请看一下，NGX-Select-ex的演示