查找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

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