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

지금 당신 만의 스타일을 어쩌면 당신에 맞는 뭔가 요소 구조를 변경해야합니다.