寻找 angular2 的下拉组件

Question

我正在寻找 Angular2 的下拉选择组件，除了 Angular2 本身之外没有其他依赖项。 我发现的所有组件都需要 jquery，否则我必须在没有 Angular2 本身以外的依赖项的情况下使用它

Answer 1

创建自定义下拉菜单没什么大不了的。再加上它是你能得到的“轻量级”。您需要做的就是：

1. 根据传递的数据创建元素列表
2. 使列表在单击时可见，并在选择列表元素时再次隐藏
3. 选择元素时发送数据

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

    @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

现在您只需要对其进行样式设置，并可能将元素结构更改为适合您的内容。