Question

我正在寻找Angular2的下拉选择组件，而不是Angular2本身以外的依赖项。我发现的所有组件都需要jquery，或者我必须使用它而没有Angular2本身以外的依赖

Answer 1

创建自定义下拉列表并不是什么大不了的事。此外，它还具有轻量化的特点。你可以得到。您所需要做的就是：

从传递的数据中创建元素列表
在单击时显示列表，并在选择列表元素时再次隐藏它
选择元素时发出数据

这基本上就是你需要的一切：

    @Component({
      selector: 'custom-select',
      template: `
          <div class="selected" (click)="openClose()">
              <div class="when-selected" *ngIf="selected">
                  <span>{{selected.title}}</span>
                  <img [src]="selected.img" />
              </div>
              <div class="placeholder" *ngIf="!selected">
                  This is shown when nothing is selected
              </div>
          </div>
          <ul class="select" [hidden]="closed">
              <li *ngFor="let o of options" (click)="select(o)">
                  <span>{{o.title}}</span>
                  <img [src]="o.img" />
              </li>
          </ul>
          `
      })

      export class CustomSelect {
          @Input() options: any;

          @Input() selected: any;
          @Output() selectedChange: EventEmitter<any> = new EventEmitter();

          closed: boolean = true;

          select(option: any): void {
              this.selected = option;
              this.selectedChange.emit(option);
              this.openClose();
          }

          openClose(): void {
              this.closed = !this.closed;
          }
      }

你这样使用它：

<custom-select [(selected)]="myItem" [options]="allOptions"></custom-select>

以下是整个plunker

现在你只需要设置样式并可能将元素结构更改为适合你的东西。

寻找angular2的下拉组件

1 个答案: